物料UI主题覆盖问题

Question

这是我的代码，我试图覆盖材料UI反应的主题，但不知何故它没有覆盖，我只得到默认颜色。这是我的代码。

我还安装了合适的库，在JSON包中添加了所需的"@material-ui/styles": "^4.11.4",和"@material-ui/core": "4.11.4",。干净的安装和重启，它看起来很简单，但仍然不能工作。

import {ThemeProvider} from '@material-ui/styles';
import Button from '@material-ui/core/Button';
import React from "react";

function App() {

    return (
        <ThemeProvider theme={theme}>
            <Button color="primary">Primary</Button>
            <Button color="secondary">Secondary</Button>
        </ThemeProvider>
    );
}


const theme = createMuiTheme({
    palette: {
        primary: {
            // Purple and green play nicely together.
            main: "#000000",
        },
        secondary: {
            // This is green.A700 as hex.
            main: '#11cb5f',
        },
    },
    overrides: {
        MuiButton: {
            textPrimary: {
                color: "#efefef"
            },
            text: {
                color: '#000000',
            },
            containedPrimary: {
                backgroundColor: "#9f9f9f"
            }
        },
    },
});

export default App;

Answer 1

您缺少createMuiTheme导入，并且您从错误的文件夹导入ThemeProvider。

试试这个：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

您根本不应该真正需要@material-ui/styles包。此外，请确保在使用App中的变量之前定义theme。