web-dev-qa-db-ja.com

Material-UIドロワーセットの背景色

Material-UI Drawerの背景色を簡単に設定する方法は？これを試しましたが、機能しません

<Drawer 
  style={listStyle3}
  open={this.state.menuOpened}
  docked={false}
  onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>

const listStyle3 = {
  background: '#fafa00',
  backgroundColor: 'red'
}
javascriptreactjsmaterial-ui
8
Bobek

編集：（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'}}/>

10
Matan Bobi

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;
2
Yirenkyi

ドロワーはスタイルの小道具を受け入れません。代わりにclassesを使用してください

参照 ドロワーAPI

0
Jorgedl