材质UI选择-如果选择了某些内容，则更改样式

Question

我有一个MUI-Select（material-ui.com），带有概述的输入，我想根据是否选择了某些内容来设置样式。

const OutlinedInputStyles = makeStyles((theme: Theme) => ({
  root: {
    '&:hover $notchedOutline': {
      borderColor: 'blue',
    },
    '&$focused $notchedOutline': {
      borderColor: 'blue',
    },
    '&$focused $input': {
      backgroundColor: '#FFF',
    },
  },
  focused: {},
  notchedOutline: {},
  input: {
    color: 'blue',
    fontSize: '1.6em',
    padding: '18px 20px',
  },
}))

.......
.......

<FormControl variant='outlined'>
  <InputLabel ref={inputLabel} classes={inputLabelStyles}>
    Age
  </InputLabel>
  <Select
    id='label'
    classes={selectStyles}
    labelWidth={labelWidth}
    value={age}
    onChange={handleAgeChange}
    input={
      <OutlinedInput
        labelWidth={labelWidth}
        classes={outlinedInputStyles}
      />
    }
  >
    <MenuItem value={10} classes={menuItemStyles}>
      Ten
    </MenuItem>
    <MenuItem value={20} classes={menuItemStyles}>
      Twenty
    </MenuItem>
    <MenuItem value={30} classes={menuItemStyles}>
      Thirty
    </MenuItem>
  </Select>
</FormControl>

“悬停”和“焦点”部分正在起作用。

我有TextFields，如果填写了该字段，我可以使用'& input:valid + fieldset'来更改样式，但是我无法在选择中使用它。

我还尝试在选择输入上使用:not(:empty)，但没有成功。

有人想让我更进一步吗？

致谢。