【问题标题】：How to set the background color of material ui drawer component with styled-components?如何使用 styled-components 设置材质 ui 抽屉组件的背景颜色？
【发布时间】：2019-01-17 03:30:19
【问题描述】：

背景

我在我的应用程序中使用Material ui 绘图以及Styled components。我已经阅读了使用 Styled 组件设置 Material ui 组件样式的文档，并使其适用于几个简单的组件。

问题

更改背景颜色不符合我的预期。简单地在样式化组件中添加样式似乎会将样式应用到错误的级别。

我尝试过的

import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components';

const StyledDrawer = styled(Drawer)`
        background-color: red;
`;

结论

据我所知，我需要设置称为 Paper 组件的内部部分的样式。我看不到使用样式化组件的方法。

问题

是否可以在带有样式组件的材质 ui 抽屉中为这个隐藏的纸质组件设置样式？

【问题讨论】：

标签： javascript reactjs material-ui styled-components

【解决方案1】：

要从抽屉（或其他类似这样工作的组件）中设置内部组件的样式，您必须覆盖您想要的组件的类名，这里是如何使用：

https://material-ui.com/customization/overrides/#overriding-with-classes

为了更快：您只需像创建任何其他组件一样创建样式，然后就可以了

<Drawer classes={{ paper: classes.theNameOfTheStyleClass }} />

这样，您将覆盖特定组件（论文组件）的样式。

在组件的 API 中，您可以检查可以覆盖哪些类。

这里是抽屉 API：https://material-ui.com/api/drawer/#css-api

希望它可以帮助你：3

【讨论】：

感谢您的回复，但这不是使用库styled-components
它曾经是 matria UI 4.0.0 之前的最佳解决方案。现在，当我尝试将背景颜色设置为 Drawer 时，似乎有些东西坏了

【解决方案2】：

是的，您是正确的 - 您的样式有效，但由于纸张样式更具体，它被覆盖了。

是的，您可以通过设置抽屉下方的 div 样式来使用样式组件：

const StyledDrawer = styled(Drawer)`
  & > div {
    background-color: red;
  }
`;

这是一个有效的代码笔：https://codesandbox.io/embed/50mp1nnx94?fontsize=14

你不能用类名来做，因为它们是在运行时生成和插入的，所以“paper”类实际上会被称为“MuiDrawer-paper-2579”这样你不会提前知道数字的东西.

【讨论】：

自从您发布此内容以来已经很久了，但只想说它真的帮助了我！谢谢你:)