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

Posted 2023-02-21

【中文标题】如何在 Material-UI 中覆盖 .MuiSelect-nativeInput

【英文标题】：How to override .MuiSelect-nativeInput in Material-UI

【发布时间】：2021-10-15 21:02:23

【问题描述】：

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 类中删除不透明度。

【参考方案1】：

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

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

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