如何在MUI中更改输入装饰中的轮廓颜色？

Question

我正在试图更改大纲中默认的蓝色颜色，但我不知道如何做到：(我可以使用普通的TextField，但这是一个窗体控件

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

Answer 1

您需要将sx道具传递给InputLabel和OutlinedInput组件，如下所示：

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

有关此解决方案的实际工作示例，您可以查看这个沙箱。