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

Question

我在我的 React 项目中使用 Material UI Select component。

我正在尝试覆盖 CSS class .MuiPaper-root 和/或 .MuiMenu-list.

我的Select组件：

<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"
      }
    }
  }
});

然后，我们需要将它作为主题道具传递给 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 组件：

          <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 中将背景颜色更改为蓝色。

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

How override Material UI Popover CSS classes in Select component in React

css

emotion

reactjs

material-ui