如何在Material-UI中覆盖.MuiSelect-nativeInput？

Question

const styles = makeStyles((theme) => ({
  root: { margin: "0px 20px" },
  textStyle: {
    fontFamily: "Comfortaa",
  },
  container: {},
  textField: {
    fontFamily: "Comfortaa",
  },
  dropDownFormSize: {
    width: "100%",
    fontFamily: "Comfortaa",
  },
  optionDropdown: {
    color: "black",
  },
  dropDownSelector: {
    color: "black",
    backgroundColor: "tomato",
  },
  nativeInput: {
    opacity: "1",
  },
}));

const MainTable: React.FC = () => {
  const classes = styles();
  <FormControl
    classes={{
      root: classes.dropDownFormSize,
    }}
  >
    <Select
      required
      className={classes.dropDownSelector}
      value={emotion[i]}
      name="emotion"
      onChange={handleChangeEmotion(i)}
      classes={{
        root: classes.optionDropdown,
        select: classes.optionDropdown,
        // using nativeInput here gives me error
        nativeInput: classes.nativeInput,
      }}
      MenuProps={{
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "left",
        },
        getContentAnchorEl: null,
        MenuListProps: {
          className: classes.optionDropdown,
        },
      }}
      placeholder="Select Something"
      native={false}
    >
      <MenuItem
        value=""
        disabled
        // className={
        //     classes.optionItems
        // }
      >
        Select Emotion
      </MenuItem>
      {emotions.map((emotion, i) => {
        return (
          <MenuItem
            key={i}
            // className={
            //     classes.optionItems
            // }
            value={emotion}
          >
            {emotion}
          </MenuItem>
        );
      })}
    </Select>
  </FormControl>;
};

我想要从 .MuiSelect-nativeInput 类中移除不透明度。当我尝试使用 nativeInput 规则覆盖此类时，我会收到以下错误信息：- 对象文字只能指定已知属性，而 'nativeInput' 不存在于类型 'Partial<ClassNameMap<SelectClassKey>>' 中。 即使在 Select API 的文档中提供了 nativeInput 规则。我已经尝试在主题文件中覆盖它，但是再次出现 nativeInput 不存在的错误。如何从 MuiSelect-nativeInput 类中移除不透明度。

- Abdullah Ch

Answer 1

你可以使用一个渲染为选择输入的TextField。

const useStyles = makeStyles({
  root: {
    "& .MuiSelect-nativeInput": {
      opacity: 1,
    },
  },
});

<TextField 
  select
  classes = {{ root: classes.root }}
/>

- Hamidreza