时间戳

首页 > 解决方案 > Material UI 主题覆盖问题

reactjs - Material UI 主题覆盖问题

问题描述

这是我的代码，我试图覆盖 Material 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;

标签： reactjsmaterial-ui

解决方案

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

尝试这个：

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

您根本不需要 @material-ui/styles 包。另外，请确保theme在使用变量之前定义App.

推荐阅读