Question

我正在使用material-ui的snackbar组件。目前，小吃店显示为黑色。你知道我怎么改变颜色吗？背景颜色仅改变快餐栏所在的整个div的颜色。它不会改变小吃店的颜色。

Answer 1

使用material-ui 1.0，您应该使用prop ContentProps 覆盖SnackbarContent组件中的根CSS类。

以下是一个例子：

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);

Answer 2

您必须设置bodyStyle属性：

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

您可以在documentation

中找到有关如何自定义零食栏的更多信息

Answer 3

在当前的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>

从material-ui设置snackbar元素的颜色

3 个答案: