React中选择组件如何覆盖物料UI根CSS类

Question

我正在使用材料UI选择组件在我的反应项目。

我正在尝试重写CSS类.muipaper-root和或.muimenu-list。

我的选择组件：

<Select
  value={selectValue}
  disableUnderline
  onChange={handleChange}
  css={styles.select}
>
  {cities?.map((city) => {

    return (
      <MenuItem
        key={city.value}
        value={city.value}
        css={styles.selectItem}
      >
        {city.label}
      </MenuItem>
    );
  })}
</Select>

下面不行吗？

export default ({ theme }: StylesProps) => ({
 select: css`
   .MuiPaper-root {
      background-color: red;
    }
 `,
});

Answer 1

为了覆盖材质UI类，您可以用类覆盖样式。在这种方法中，您需要创建包含修改过的类的usestyles对象。

然后，可以通过更改类属性来为目标组件（例如MenuItem)分配：

import { makeStyles } from '@material-ui/core/styles';
//other import statements//

    const useStyles = makeStyles({
      list: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
      },
      root:{
      //css properties for the root//
      },
    });
    export default function ClassesNesting() {
          const classes = useStyles();
          return (
        <Select
          value={selectValue}
          disableUnderline
          onChange={handleChange}
          classes={{
                    root: classes.root,
                    }}
        >
          {cities?.map((city) => {
    
            return (
              <MenuItem
                key={city.value}
                value={city.value}
                classes={{
                    list: classes.list,
                    }}
                    >
              >
                {city.label}
              </MenuItem>
            );
          })}
        </Select>
          )

其他组件和类也是如此。