MUI 按钮颜色在页面加载时不断变化

Question

我在 MUI 中遇到了一个非常奇怪的问题。这是页面加载时按钮的样子：

然而，当图像完成加载时，我得到以下信息：

按钮在那里，只是……白色？我试过删除我的主题，没有帮助。将鼠标悬停在按钮上也会恢复颜色。极其诡异！我正在使用 NextJS。我不知道为什么会这样。如果我使用 DevTools，我意识到如果我取消选中“按钮”元素的背景颜色属性，它会恢复正常：

'use client';
import { ShoppingCart as ShoppingCartIcon } from '@mui/icons-material';
import UploadFileIcon from '@mui/icons-material/UploadFile';
import { AppBar, Button, Typography, useTheme } from '@mui/material';


const TopNavbar = () => {
    const theme = useTheme();
    return (
        <div
            id="top-nav"
            className="h-16 w-full px-8 static"
            style={{
                backgroundColor: theme.palette.primary.main,
                color: theme.palette.primary.contrastText,
            }}
        >
            <div className="flex items-center w-full h-full">
                <div className="mr-6">
                    <ShoppingCartIcon className="text-4xl" />
                </div>
                <div className="flex-grow">
                    <Typography variant="h6">Products</Typography>
                </div>
                <div className="flex">
                    <Button variant="contained" color="secondary">
                        <UploadFileIcon className="mr-2" /> Import
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default TopNavbar;

Answer 1

道歉，试试这个用

ThemeProvider

包裹你的组件

例如：

import { ThemeProvider } from '@mui/material/styles';
import theme from './your-theme-file';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;