Пользовательская тема Material-UI с createMuiTheme () не работает - PullRequest
0 голосов
/ 16 января 2020

Моя реализация пользовательской темы проста, следуя официальным документам .

Код такой, как показано ниже, , но текст («Some Here Here») принимает неправильный цвет # f50057 вместо «вторичного» цвета, который я определил в своей пользовательской теме. Вероятно, я что-то упускаю из-за c ссылки здесь. И этот неправильный цветовой код принимает его # f50057, я понятия не имею, откуда он берется, так как я не определил этот цветной код нигде в моем проекте.

import React from "react";
import { createMuiTheme, makeStyles } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";

const theme = createMuiTheme({
    palette: {
        primary: { main: "#2196f3" },
        secondary: { main: "#5F7D8E" },
        error: { main: "#f44336" }
    }
});

const useStyles = makeStyles(theme => ({
    topTitleText: {
        fontSize: "2.25rem",
        fontFamily: "Arial",
        fontWeight: "500",
        letterSpacing: "0.0075em",
        color: theme.palette.secondary.main
    }
}));

const MyComponent = props => {
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <React.Fragment>
                <div className={classes.topTitleText}>
                    Some Text Here
                </div>
            </React.Fragment>
        </ThemeProvider>
    );
};

export default MyComponent;

Но если я закомментирую 'цвет 'field в функции useStyles () и непосредственно используйте «вторичный» пользовательский цвет внутри оператора return () в компоненте, как показано ниже, это работает, как и ожидалось, принимая правильный «вторичный» цвет

const useStyles = makeStyles(theme => ({
    topTitleText: {
        fontSize: "2.25rem",
        fontFamily: "Arial",
        fontWeight: "500",
        letterSpacing: "0.0075em",
        // color: theme.palette.secondary.main
    }
}));

const MyComponent = props => {
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <React.Fragment>
                <div className={classes.topTitleText} color="secondary">Some Text Here</div>
            </React.Fragment>
        </ThemeProvider>
    );
};

Это версии пакета, которые я использую (из пакета. json)

    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/pickers": "^3.2.8",
    "@material-ui/styles": "^4.8.2",    
    "material-ui": "^0.20.2",

1 Ответ

1 голос
/ 16 января 2020

Проблема с

const useStyles = makeStyles(theme => ({ // this theme is comes from makeStyles function  
... 
color: theme.palette.secondary.main // so it will recive default color 

Решение change your theme name to another one like

const custom_theme = createMuiTheme({

и используйте его как

const useStyles = makeStyles(theme => ({ 
... 
color: custom_theme.palette.secondary.main
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...