material-ui - 如何更改从 inputBase 继承的选择组件的 CSS、概述及其伪类

问题描述

我正在尝试自定义 material-ui 的选择组件的 CSS，它继承自 class="MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85" 现在我是卡住无法更改默认设计。请帮助我，我对material-ui没有太多经验

我试图在 select 的类道具中传递一个对象以更改 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 类

标签： material-ui

material-ui - 如何更改从 inputBase 继承的选择组件的 CSS、概述及其伪类

问题描述

解决方案

推荐阅读