snackbar要素の色をmaterial-uiから設定します

Question

material-uiのsnackbarコンポーネントを使用しています。現時点では、スナックバーは黒で表示されます。どうやって色を変えることができるか知っていますか？ Background-colorは、snackbarが存在するdiv全体の色のみを変更します。スナックバーの色は変わりません。

Answer 1

あなたがbodyStyleプロパティを設定する必要があります。

<Snackbar bodyStyle={{ backgroundColor: 'teal', color: 'coral' }} /> 

のRefあなたが小道具SnackbarContentPropsでSnackbarContentコンポーネントからのルートCSSクラスをオーバーライドする必要があります材料-UI 1.0でdocumentation

Answer 2

。ここで

は一例です：

const styleSheet = createStyleSheet(() => ({ 
    root: { 
     background: 'red' 
    } 
})); 

class MySnackbar extends Component { 
    render() { 
     const { classes } = this.props; 
     return (
      <div> 
       <Snackbar 
        SnackbarContentProps={{ 
         classes: { 
          root: classes.root 
         } 
        }} 
        message={<span>Some message</span>} 
       /> 
      </div> 
     ); 
    } 
} 

export default withStyles(styleSheet)(MySnackbar);