如何使用样式组件设置材质用户界面抽屉组件的背景色？

Question

背景

我在应用程序中使用Material ui绘图以及样式化组件。我已阅读了有关使用样式化组件对Material ui组件进行样式设置的文档，并使其可用于多个简单的组件。

问题

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

我尝试过的

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

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

结局

从我看到的内容中，我需要对称为Paper组件的内部部分进行样式设置。我看不到使用样式化组件来做到这一点的方法。

题

是否可以在带有样式化组件的材料ui抽屉中对此隐藏的纸张组件进行样式设置？

Answer 1

是的，你是对的 - 你的风格正在起作用，但由于纸张风格更具体，它被覆盖了。

是的，您可以通过样式化抽屉下方的 div 来使用样式组件执行此操作：

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

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

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

Answer 2

要从抽屉中设计内部组件（或其他类似组件的组件）的样式，您必须覆盖所需组件的类名，这是使用方法：

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

更快：您只需像创建其他任何组件一样创建样式，然后执行

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

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

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

这是Drawer API：https：//material-ui.com/api/drawer/#css-api

希望它可以对您有所帮助：3