[reactjs] material-ui에서 스낵바 요소의 색상 설정

bodyStyle속성 을 설정해야 합니다.

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

문서 에서 스낵바를 사용자 정의하는 방법에 대한 자세한 정보를 찾을 수 있습니다.

-------------------

material-ui 1.0 이상에서는 SnackbarContent 컴포넌트의 루트 CSS 클래스를 prop ContentProps로 재정의해야합니다 .

다음은 그 예입니다.

const styles = {
  root: {
      background: 'red'
        }
        };
        
        class MySnackbar extends Component {
          render() {
              const { classes } = this.props;
              
                  return (
                        <Snackbar
                                ContentProps={{
                                          classes: {
                                                      root: classes.root
                                                                }
                                                                        }}
                                                                                message={<span>Some message</span>}
                                                                                      />
                                                                                          );
                                                                                            }
                                                                                            }
                                                                                            
                                                                                            export default withStyles(styles)(MySnackbar);
                                                                                            

누군가 스타일을 props로 전달하고 싶지 않다면 CSS 파일에 클래스를 작성하고이를 ContentProps에 할당 할 수도 있습니다.

ContentProps={{
  classes: {
      root: 'errorClass'
        }
        }}
        

index.css 파일에서 :

.errorClass { color: 'red' }

-------------------

현재 material-ui 버전 (4.3.0)에는 ContentProps 방식보다 훨씬 더 간단한 접근 방식이 있습니다. 대신의 message속성 당신은을 사용할 수있는 SnackbarContent아이로 간단하게 전화를 style={}그 위에

<Snackbar
  open={this.state.showSnackbar}
    autoHideDuration={3000}
      onClose={() => {this.setState({showSnackbar: false})}}
      >
        <SnackbarContent style={{
              backgroundColor:'teal',
                  }}
                      message={<span id="client-snackbar">Hello World</span>}
                        />
                        </Snackbar>
                        

출처
https://stackoverflow.com/questions/39916070