如何更改material-ui的默认背景色

Question

我为我的公司制作了一个仪表板。现在我想改变一些默认样式的材质组件。例如，我想改变Paper组件的背景。我不想为每个组件添加自己的样式，也不想创建一个新的自定义组件。换句话说，我想改变材质组件的默认样式。

有解决办法吗?

Answer 1

const theme = createTheme({
palette: {
primary: {
main: "#fffff",
},
secondary: {
main: "#010101",
},
},
});
const App = () => {
return (<ThemeProvider theme={theme}>
.....
</ThemeProvider>); 
}

你可以查看他们的文档

• https://material-ui.com/customization/palette/
• https://material-ui.com/customization/theming/

Answer 2

你可以这样修改样式:

1. 如果你不想创建单独的css文件，你可以直接在组件中更改样式:

<Paper  style={{backgroundColor: "red"}}>

这是一个很好的小调整，如果你通过这个添加很多样式，它会变得混乱，很难阅读。

2。或者你可以添加className到你的组件和创建css文件，并从那里改变样式:

<Paper className='papper'>

如果你想添加很多样式，这是更好的，你的样式将在单独的文件中，这样更容易阅读。