Блог

 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 класса.

Вместо этого вы можете использовать TextField визуализацию в качестве выбранного ввода.

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

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