如何在MUI v5中更改通知堆栈的默认背景色？
如何在MUI v5中更改通知堆栈的默认背景色？
提问于 2022-01-11 08:52:50
默认的背景颜色是白色，但我想将其更改为深色。
在mui v5中启用暗模式。
我已经找到了更改错误、信息等的方法，但是我想要做的是更改默认的背景色，而不指定任何变体。
// _app.tsx
<SnackbarProvider maxSnack={3}>
<Component {...pageProps} />
</SnackbarProvider>这就是实现通知堆栈的方式。
回答 4
Stack Overflow用户
回答已采纳
发布于 2022-05-30 20:01:25
默认情况下，MUI组件带有情感作为它们的样式引擎。makeStyle是过时的梅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>
);
};Stack Overflow用户
发布于 2022-02-01 15:15:36
这对我有帮助。
SnackbarProviderProps：
<SnackbarProvider
classes={
containerRoot: classes.containerRoot
}
/>风格：
containerRoot: {
'& .SnackbarContent-root': {
backgroundColor: 'color' !important`,
'&.SnackbarItem-contentRoot': {
borderRadius: '0px'
}
}
}Stack Overflow用户
发布于 2022-01-11 08:57:53
我也有同样的问题。我制作了一个新的<MySnackbar>组件，将所有的道具传递给原始的<Snackbar>，并在新组件中添加了默认的variant和severity。更好的是，您现在不需要编写<Snackbar><Alert /><Snackbar />。
MUI 5.0.3的示例如下(我希望它始终显示在顶部)
/* usage:
* This component should be connected to redux store.
* setup:
* <TopSnackbar /> // in top layer like App.tsx
* use with redux/snackbar.ts
* interact:
* import { showTopSnackbar, hideTopSnackbar} from "redux/snackbar"
* showTopSnackbar(message,severity?);
* hideTopSnackbar();
*/
import { Alert, IconButton, Snackbar } from "@mui/material";
import { connectTopSnackbar, hideTopSnackbar } from "redux/snackbar";
import { useSelector } from "redux/store";
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { Close } from "@mui/icons-material";
const DEFAULT_AUTO_HIDE_MS = 6000;
export function TopSnackbar() {
const dispatch = useDispatch();
const snackbar = useSelector((state) => state.snackbar);
const { isOpenTopSnackBar, snackBarMessage, snackBarSeverity } = snackbar;
const autoHideMs = 6000 ?? DEFAULT_AUTO_HIDE_MS;
useEffect(() => {}, []);
useEffect(() => {
dispatch(connectTopSnackbar());
}, [dispatch]);
function closeHandler() {
dispatch(hideTopSnackbar());
}
return (
<Snackbar
anchorOrigin={{ vertical: "top", horizontal: "center" }}
open={isOpenTopSnackBar}
autoHideDuration={autoHideMs}
onClose={closeHandler}
message={snackBarMessage}
>
{snackBarSeverity ? (
<Alert
variant="filled"
severity={snackBarSeverity}
action={
<IconButton
// variant="contained"
color="inherit"
size="small"
onClick={closeHandler}
>
<Close />
</IconButton>
}
>
{snackBarMessage}
</Alert>
) : undefined}
</Snackbar>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70663961
复制相关文章
相似问题
腾讯云开发者
