如何在React中选择组件中覆盖材质UI弹出窗口CSS类

Question

我在我的React项目中使用材质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

根据文档，我们有几种方法可以在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的属性(文档中的描述)

首先，我在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中，将背景色改为蓝色。