javascriptreactjsmaterial-uifrontendui-design

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


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>

Solution

  • 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.