How can I change the outlined color in an input adornment in MUI?

Kevstrosky 0
Viewed 26

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>
ui-design frontend material-ui reactjs javascript
1 Answers

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.

Ahmet Emre Kılınç0
Related