[英]can't change background color in theme Material-UI
I have been trying to define a custom theme using material UI and defining a default
background colour for it.我一直在尝试使用材质 UI 定义自定义主题并为其定义
default
背景颜色。 But the changes are not taking effect while other pallete
options are working.但是,当其他
pallete
选项正在工作时,这些更改并未生效。 Can anybody tell me what I'm doing wrong?谁能告诉我我做错了什么? As far as I can tell this is the way to change the colour.
据我所知,这是改变颜色的方法。
Here's my code这是我的代码
theme.ts
import { createTheme } from '@mui/material';
import {red} from '@mui/material/colors';
const theme = createTheme({
palette: {
background: {
default: '#FFD600',
paper: '#FFD600',
},
},
});
export default theme;
my entry file我的入口文件
import '../styles/globals.css';
import {ThemeProvider} from "@mui/material/styles"
import theme from '../theme'
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
EDIT: It seems to be changing the background for the components I have used with material-UI but not for other components I may define.编辑:它似乎正在改变我与 material-UI 一起使用的组件的背景,但不会改变我可能定义的其他组件。 eg Here .
例如这里。 I used the card component of MUI and the background was changed but I need it to change the background colour of the whole page
我使用了MUI的卡片组件,背景改变了,但我需要它来改变整个页面的背景颜色
EDIT2: The component one worked because I defined paper colour, but I still cant get default
to work EDIT2:组件一个工作,因为我定义了纸张颜色,但我仍然无法
default
工作
So the reason it's still not working is that we need to import CssBaseline
for it to work.所以它仍然无法工作的原因是我们需要导入
CssBaseline
才能使其工作。 CssBaseline
implements background.default
color according to the doc. CssBaseline
根据文档实现background.default
颜色。
Here's how it'll work这是它的工作原理
import '../styles/globals.css';
import {ThemeProvider} from "@mui/material/styles"
import theme from '../theme'
import { CssBaseline } from '@mui/material/';
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider theme={theme}>
<CssBaseline/>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
Still weird how the paper
property works but for default
you need to import additional dependencies paper
属性的工作方式仍然很奇怪,但default
您需要导入其他依赖项
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.