css - 如何在 React 的 Select 组件中覆盖 Material UI Popover CSS 类

Question

我正在使用 Material UI Select component在我的 React 元素中。

我正在尝试覆盖 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

根据doc ，我们可以通过多种方式修改 MUI 中的样式。为了改变MuiPaper，我们可以利用createMuiTheme创建一个主题来覆盖MuiPaper:

const theme = createMuiTheme({
  overrides: {
    MuiPaper: {
      root: {
        color: "white"
      }
    }
  }
});

然后，我们需要将它作为主题 Prop 传递给 ThemeProvider 组件:

      <ThemeProvider theme={theme}>
          //***Other part of your code***//
      </ThemeProvider>

当涉及到更改 Select 组件中的 MenuProps 时，我们可以在 Select 组件中使用一个名为 MenuProps 的属性 ( description in doc )

首先，我在useStyles中创建了一个列表样式:

const useStyles = makeStyles((theme) => ({
//other classes//
  list: {
    backgroundColor: "blue"
  }
}));

然后将其作为 MenuProp 属性传递给选择组件:

          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            onChange={handleChange}
            MenuProps={{ classes: { list: classes.list } }}
          >
                 //***other part of your code***//
          </Select>

这是一个codesandbox我为此示例创建的示例。在Muipaper修改中，我将文字的颜色改为白色。并在 MenuProps 中将背景颜色更改为蓝色。