如何更改 MUI v5 中 notistack 的默认背景颜色？

Question

默认背景颜色是白色，但我想将其更改为深色。

mui v5 中启用了深色模式。

我已经找到了更改错误、信息等的方法，但我想做的是更改默认背景颜色而不指定任何变体。

// _app.tsx
<SnackbarProvider maxSnack={3}>
  <Component {...pageProps} />
</SnackbarProvider>

这就是notstack的实现方式。

Answer 1

默认情况下，MUI 组件以情感作为其风格引擎。makeStyle 在 mui v5 中已过时（已弃用）。如果你想覆盖更深元素的样式，你必须这样做：

https://mui.com/material-ui/guides/interoperability/#deeper-elements-3

import { SnackbarProvider } from "notistack";
import { styled } from "@mui/material";

const StyledSnackbarProvider = styled(SnackbarProvider)`
  &.SnackbarItem-contentRoot {
    background-color: orange;
  }
`;

export default () => {
  return (
    <StyledSnackbarProvider>
      <MyApp />
    </StyledSnackbarProvider>
  );
};