如何使用样式化组件设置物料ui抽屉组件的背景色？
背景
我在我的应用程序中与Styled components一起使用了Material ui绘图。我已经阅读了使用样式化组件对材料ui组件进行样式化的文档，并对几个简单的组件进行了验证。
问题
更改背景颜色并不符合我的预期。简单地将样式添加到带样式的组件中似乎会在错误的级别上应用样式。
我尝试过的东西
import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components';
const StyledDrawer = styled(Drawer)`
background-color: red;
`;结论
根据我所看到的，我需要设置内部部分的样式，称为Paper组件。我没有看到有样式的组件可以做到这一点。
问题
是否可以在具有样式组件的material ui抽屉中设置此隐藏的纸质组件的样式？
回答 2
Stack Overflow用户
发布于 2018-08-15 06:02:33
要样式化抽屉中的内部组件(或其他类似工作的组件)，您必须覆盖您想要的组件的类名，以下是如何使用：
https://material-ui.com/customization/overrides/#overriding-with-classes
更快地说:您只需像创建任何其他组件一样创建样式，然后您就可以
<Drawer classes={{ paper: classes.theNameOfTheStyleClass }} />
这样，您就覆盖了特定组件( Paper one)的样式。
在组件的API中，您可以检查可以覆盖哪些类。
这就是这个抽屉API：https://material-ui.com/api/drawer/#css-api
希望它能帮助你:3
Stack Overflow用户
发布于 2019-02-28 13:19:18
是的，你是正确的-你的风格是有效的，但由于纸张风格更具体，它被覆盖了。
是的，您可以通过设置抽屉下面的div的样式来使用style-components：
const StyledDrawer = styled(Drawer)`
& > div {
background-color: red;
}
`;下面是一个有效的代码：https://codesandbox.io/embed/50mp1nnx94?fontsize=14
你不能用类名做到这一点，因为它们是在运行时生成并插入的，所以“纸张”类实际上将被称为"MuiDrawer-paper-2579“，其中你不会事先知道数字。
https://stackoverflow.com/questions/51770865
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号