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

Question

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

Answer 1

随着物质的UI 1.0,你应该覆盖从SnackbarContent组件根CSS类道具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);

Answer 2

在当前的 material-ui 版本 (4.3.0) 中，有一种比ContentProps方法更简单的方法。message您可以使用SnackbarContentas child代替属性并简单地调用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>

Answer 3

the 的根组件Snackbar只关心正确定位自身，如果你想改变物理的外观Snackbar，你需要定位SnackbarContentviaContentProps道具。在 v5 中，您可以使用sx轻松做到这一点：

<Snackbar
  ContentProps={{
    sx: {
      background: "red"
    }
  }}

另一种方法是为您创建自定义变体Snackbar：

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiSnackbar: {
      variants: [
        {
          props: { variant: "trouble" },
          style: {
            "& .MuiSnackbarContent-root": {
              background: "orange"
            }
          }
        },
        {
          props: { variant: "bigTrouble" },
          style: {
            "& .MuiSnackbarContent-root": {
              background: "red"
            }
          }
        }
      ]
    }
  }
});

<Snackbar variant="bigTrouble"

要与 typescript 一起使用，您还需要更新 的 prop 类型Snackbar：

declare module "@mui/material/Snackbar" {
  interface SnackbarProps {
    variant: "trouble" | "bigTrouble";
  }
}

Answer 4

您必须设置bodyStyle属性：

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

您可以在文档中找到有关如何自定义小吃栏的更多信息