存在数据时更改 TextField (MUI) 背景颜色

Change TextField (MUI) background color when data present

使用 'styled' MUI 组件和主题,已创建一个 TextField 组件。

当 TextField 没有数据(即为空)时,使用以下样式将背景呈现为自定义灰色:

'& .MuiInputBase-root': {
  backgroundColor: theme.palette.background.grey01,
  height: '40px'
},

在 TextField 中输入数据后,此背景颜色需要更改(变为白色)。不仅仅是 'on focus',如果存在数据(即 TextField 不为空),白色背景必须持续存在;但是,如果用户 deletes/removes 数据(即 TextField 被用户清空),backgroundColor 需要返回到自定义灰色。

从Chrome检查,查到相关类(包括.Mui-focused):

MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary Mui-Focused MuiInputBase-formControl css-1byr8j2-MuiInputBase-root-MuiOutlinedInput-root

已查看 https://mui.com/customization/how-to-customize/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet 的 MUI 文档,但无法确定了解何时填充/清空值的方法。

更新:

我忽略了最简单、最优雅的解决方案。

const StyledTextField = styled(TextField)`
  .MuiInputBase-root {
    background-color: ${({theme, value}) => 
      !value && theme.palette.background.grey01};
  }
`