Моя реализация пользовательской темы проста, следуя официальным документам .
Код такой, как показано ниже, , но текст («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",