如何在 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 规则覆盖此类时，我收到此错误消息：- Object literal may only specify known properties, and 'nativeInput' does not exist in type 'Partial<ClassNameMap<SelectClassKey>>'. 尽管nativeInput 规则在Select API 的文档中给出。我试图在主题文件中覆盖它，但我再次收到 nativeInput 不存在的错误。如何从 MuiSelect-nativeInput 类中删除不透明度。

Answer 1

您可以改为使用呈现为选择输入的TextField。

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

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