javascript - 如何使用 styled-components 设置 Material ui Drawer 组件的背景颜色？

Question

背景

我正在使用 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 组件的内部部分的样式。我没有找到使用样式组件来做到这一点的方法。

问题

是否可以使用样式化组件在 Material ui 抽屉中设置此隐藏纸张组件的样式？

Answer 1

要从抽屉(或像这样工作的其他组件)中设置内部组件的样式，您必须覆盖所需组件的类名称，以下是使用方法:

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

<小时/>

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

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

通过这种方式，您可以覆盖特定组件(Paper 组件)的样式。

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

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

希望对您有帮助:3