Question

我正在尝试自定义材料UI的选择组件的CSS，该CSS继承自class =“ MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85”现在，我陷入困境，无法更改默认设计。请帮助我，我对material-ui

经验不足

我尝试在选择类道具中传递对象，以更改由MuiInputBase-root-97，MuiInput-root-84，MuiInput-underline-88，MuiInputBase-formControl-98，MuiInput-formControl-85，及其伪类

const styles = theme => ({
    root: {
      '&$hover': {
      color: 'red',
    },
    },
    inputUnderline: {
      minWidth: 220,
    },
    selectEmpty: {
      marginTop: theme.spacing.unit * 2,
    },
formControl: {
      margin: theme.spacing.unit,
      minWidth: 120,
    },
  });

<FormControl className={classes.formControl}>
          <Select
            value={this.state.age}
            onChange={this.handelchange}
            name="age"
            displayEmpty
            className={classes.selectEmpty}
            classes={{
            underline: classes.inputUnderline //change css of MuiInput-underline-88 and their pseudo class
            root: classes.inputBaseRoot //want to change css of MuiInputBase-root-97 and their pseudo class
            }}
          >
            <MenuItem value="" disabled>
              Placeholder
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
          <FormHelperText>Placeholder</FormHelperText>
        </FormControl>

我想在悬停，焦点，之后和之前删除底部的边框我想要一个自定义设计，它可以覆盖选择组件上的所有CSS类强文本

Answer 1

在material-ui中，您可以覆盖样式并根据需要自定义样式。

请参阅https://material-ui.com/customization/overrides/

我如何更改从inputBase继承的，概述的及其伪类的选择组件的CSS

1 个答案: