Tailwind环境下MaterialUI Snackbar背景色设置不生效问题

SnackbarContent是MUI内置组件，默认携带高优先级的背景色样式规则，优先级高于普通Tailwind工具类，因此你写的bg-slate-200会被默认样式覆盖。flex布局相关的类没有和默认样式产生属性冲突，所以可以正常生效。

方案1：使用Tailwind important修饰符（最便捷，适配Tailwind v3+） #

直接在背景色工具类前加!前缀，强制提升样式优先级，覆盖MUI默认样式，修改后代码如下：

<Snackbar
  open={true}
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  ContentProps={{}}
  TransitionComponent={Slide}
  autoHideDuration={3000}
  onClose={() => {
    setSnackbarOpen(false);
  }}
>
  <SnackbarContent
    className="flex justify-center !bg-slate-200"
    message={<p>Changes submitted!</p>}
  />
</Snackbar>

方案2：重置默认背景样式（适配低版本Tailwind） #

如果使用Tailwind v2及更早版本，可通过MUI自带的sx属性先清除默认背景，再应用Tailwind类，无需单独嵌套SnackbarContent子组件：

<Snackbar
  open={true}
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  ContentProps={{
    className: "flex justify-center bg-slate-200",
    sx: { backgroundColor: "unset" }
  }}
  TransitionComponent={Slide}
  autoHideDuration={3000}
  onClose={() => {
    setSnackbarOpen(false);
  }}
  message={<p>Changes submitted!</p>}
/>

方案3：使用Alert组件作为Snackbar内容（MUI官方推荐） #

MUI官方文档推荐在Snackbar中嵌套Alert组件承载提示内容，样式冲突更少，还自带语义化状态图标、关闭按钮等能力：

import Alert from '@mui/material/Alert';

<Snackbar
  open={true}
  anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
  TransitionComponent={Slide}
  autoHideDuration={3000}
  onClose={() => {
    setSnackbarOpen(false);
  }}
>
  <Alert severity="success" className="!bg-slate-200">
    Changes submitted!
  </Alert>
</Snackbar>

内容的提问来源于stack exchange，提问作者Eric Hong