如何在聚焦状态下为 MUi-TextField 赋予不同的颜色，例如聚焦时为绿色，聚焦+错误时为红色

Question

我想让我的 Outlined textField 焦点为绿色，如果在打字过程中发生错误，则颜色应更改为红色。但就我而言，如果我给

"& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: 'green'
      },
    },

如果在聚焦期间也显示绿色错误。

Answer 1

.Mui-focused 与 .Mui-error 不同 class，因此您必须单独覆盖每个。请参阅 docs 以获取此组件上可用的所有 CSS class 的完整列表。

这里是自定义多个classes的例子：

import { styled } from '@mui/material/styles'

const CssTextField = styled(TextField)({
  '& label.Mui-focused': {
    color: 'green',
  },
  '& .MuiInput-underline:after': {
    borderBottomColor: 'green',
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: 'red',
    },
    '&:hover fieldset': {
      borderColor: 'yellow',
    },
    '&.Mui-focused fieldset': {
      borderColor: 'green',
    },
  },
})

这是自定义 OutlinedInput 组件的现场演示。

如何在聚焦状态下为 MUi-TextField 赋予不同的颜色，例如聚焦时为绿色，聚焦+错误时为红色

How to give MUi-TextField diff color on focued state, like green on focus and red on focus+error

textfield

material-ui