I'm trying to change the default blue color in the outlined but I don´t know how:( I could do it with a normal TextField but this one is a Form Control
<FormControl variant="outlined">
<InputLabel
htmlFor="outlined-adornment- password">
Contraseña
</InputLabel>
<OutlinedInput
style = {{width: 340}}
id="outlined-adornment-password"
type={values.showPassword ? 'text' : 'password'}
value={values.password}
onChange={handleChange('password')}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end">
{values.showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Contraseña"
/>
</FormControl>
You need to pass sx
props to both InputLabel
and OutlinedInput
components like this:
<FormControl variant="outlined">
<InputLabel
htmlFor="outlined-adornment-password"
sx={{
"&.Mui-focused": {
color: "purple"
}
}}
>
Contraseña
</InputLabel>
<OutlinedInput
style={{ width: 340 }}
id="outlined-adornment-password"
type={"password"}
endAdornment={
<InputAdornment position="end">
<IconButton aria-label="toggle password visibility" edge="end">
{false ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Contraseña"
sx={{
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "purple"
}
}}
/>
</FormControl>
You can take a look at this sandbox for a live working example of this solution.