javascript Material-UI Drawer 设置背景色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51265838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Material-UI Drawer set background color
提问by Bobek
How to simply set background color of Material-UI Drawer? tried this, but doesnt work
如何简单地设置 Material-UI Drawer 的背景颜色？试过这个，但不起作用
<Drawer
style={listStyle3}
open={this.state.menuOpened}
docked={false}
onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>
const listStyle3 = {
background: '#fafa00',
backgroundColor: 'red'
}
回答by Matan Bobi
Edit: (Jan-19) - Material UI V3.8.3
As for the latest version asked, the way to configure the backgroundColorwould be by overriding the classes.
Based on material-ui documentation here, and the css api for drawer here- This can be done by creating an object in the form of:
编辑：（1 月 19 日）- Material UI V3.8.3
至于要求的最新版本，配置的backgroundColor方法是覆盖类。
基于材料的UI文件在这里，和抽屉的CSS API这里-这可以通过在形式的对象来完成：
const styles = {
paper: {
background: "blue"
}
}
and passing it to the Drawer component:
并将其传递给 Drawer 组件：
<Drawer
classes={{ paper: classes.paper }}
open={this.state.left}
onClose={this.toggleDrawer("left", false)}
>
A working example can be seen in thiscodesandbox.
Don't forget to wrap your component with material-ui's withStylesHoC as mentioned here
在这个代码和框中可以看到一个工作示例。
不要忘记使用这里withStyles提到的material-ui 的HoC包装您的组件
Based on the props you used I have the reason to think that you're using a version which is lower than v1.3.1(the last stable version) but for the next questions you'll ask, I recommend writing the version you're using.
根据您使用的道具，我有理由认为您使用的版本低于v1.3.1（最后一个稳定版本），但对于您接下来要问的问题，我建议您编写您正在使用的版本。
For version lower than V1, you can change the containerStyleprop like this:
对于低于 的版本V1，您可以containerStyle像这样更改道具：
<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>
<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>
回答by Yirenkyi
Material UI V4.3.2As in this version you can change the backgroundColor by making use of makeStyles from '@material-ui/core/styles' as shown below:
Material UI V4.3.2在这个版本中，你可以通过使用'@material-ui/core/styles'中的makeStyles来改变backgroundColor，如下所示：
import Drawer from '@material-ui/core/Drawer';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
paper: {
background: 'black',
color: 'white'
}
});
const SideDrawer = props => {
const styles = useStyles();
return (
<Drawer
anchor="right"
open={props.drawerOpen}
onClose={() => props.toggleDrawer(false)}
classes={{ paper: styles.paper }}
>
Items
</Drawer>
);
};
export default SideDrawer;
