Material-UI Drawerの背景色を簡単に設定する方法は?これを試しましたが、機能しません
<Drawer
style={listStyle3}
open={this.state.menuOpened}
docked={false}
onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>
const listStyle3 = {
background: '#fafa00',
backgroundColor: 'red'
}
編集:(Jan-19)-Material UI V3.8.3
要求された最新バージョンについては、backgroundColor
を構成する方法はクラスをオーバーライドすることです。
material-uiのドキュメント here および引き出し用のcss api here に基づく-これは、次の形式でオブジェクトを作成することで実行できます。
const styles = {
paper: {
background: "blue"
}
}
そしてそれをDrawerコンポーネントに渡します:
<Drawer
classes={{ paper: classes.paper }}
open={this.state.left}
onClose={this.toggleDrawer("left", false)}
>
実際の例は this codesandboxにあります。
言及したように、コンポーネントをmaterial-uiのwithStyles
HoCでラップすることを忘れないでください here
使用した小道具に基づいて、v1.3.1
よりも低いバージョン(最後の安定バージョン)を使用していると思う理由がありますが、次の質問については、バージョンを作成することをお勧めします使用しています。
V1
より前のバージョンの場合、containerStyle
プロップを次のように変更できます。
<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>
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;
ドロワーはスタイルの小道具を受け入れません。代わりにclassesを使用してください
参照 ドロワーAPI