[英]MUI: cannot apply background color to Paper component
I'm trying to style the MUI <Paper>
component, however setting the background color isn't working.我正在尝试设置 MUI <Paper>
组件的样式,但是设置背景颜色不起作用。 Following the online tutorials I'm applying the background-color CSS property to the root element of the Paper
but the color remains white while other CSS properties - in this case padding
and text-align
work.按照在线教程,我将 background-color CSS 属性应用于Paper
的根元素,但颜色保持为白色,而其他 CSS 属性 - 在这种情况下padding
和text-align
工作。 Can someone please tell me what I am missing?有人可以告诉我我错过了什么吗?
import React from 'react';
import { Paper, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
const useStyles = makeStyles({
root: {
textAlign: 'center',
padding: 15,
backgroundColor: '#37474f',
}
});
export default function Header() {
const classes = useStyles();
return(
<Paper outlined square className={classes.root}
>
<Typography variant="h2" component="h1">
Pomodoro Cl
<AccessAlarmIcon sx={{ fontSize: 45, color: 'red' }} />
ck
</Typography>
</Paper>
)
}
First of all your attribute outlined
is incorrect, it should be variant="outlined"
as per the documentation .首先,您outlined
的属性不正确,根据文档,它应该是variant="outlined"
。 For the background-color
not working, you will need to add !important
to the property so it takes precedence over mui's default styling.对于background-color
不起作用,您需要将!important
添加到属性中,以便它优先于 mui 的默认样式。 Here's a working codesandbox for you: https://codesandbox.io/s/strange-smoke-y6yhv?file=/src/App.tsx这是适合您的工作代码框: https://codesandbox.io/s/strange-smoke-y6yhv?file=/src/App.tsx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.