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

Posted 2023-02-21

【中文标题】如何更改从 inputBase 继承的选择组件的 CSS、概述及其伪类

【英文标题】：How can i change CSS of select component that inherited from inputBase, outlined and their pseudo-class

【发布时间】：2019-09-16 14:25:57

【问题描述】：

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

我试图在 select 的类 props 中传递一个对象来更改由 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 类strong text

【参考方案1】：

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

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