Я провел некоторые исследования и не смог найти решение.

Я пытаюсь создать тему с помощью createMuiTheme и использовать ее позже в makeStyles для получения ключей внутри. (палитра в примере) Однако кажется, что пользовательская тема не применяется в makeStyles.

import React from 'react'; import ReactDOM from 'react-dom'; import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import red from "@material-ui/core/colors/red"; const useStyles = makeStyles(theme ={amp}gt; { console.log(theme); // Only defaults but not red in palette. return { root: { color: theme.palette.primary[400] // This is not working. } }; }); function App() { const classes = useStyles(); const theme = createMuiTheme({ palette: { primary: red } }); return ( {amp}lt;ThemeProvider theme={theme}{amp}gt; {amp}lt;Button className={classes.root}{amp}gt;Hook{amp}lt;/Button{amp}gt; {amp}lt;/ThemeProvider{amp}gt; ); } 

Однако в другом компоненте, использующем useTheme, он работает без каких-либо проблем. Что я сделал не так?

 const useStyles = makeStyles(theme ={amp}gt; { console.log(theme); // Here palette includes the new palette. return { root: { color: theme.palette.primary[400] } }; }); function anotherApp() { const classes = useStyles(); const theme = useTheme(); ... } 
шифровать

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Ваша пользовательская тема применяется в этой строке: {amp}lt;ThemeProvider theme={theme}{amp}gt; , и ваша функция makeStyles вызывается до этого.
Это означает, что в этой строке const classes = useStyles(); Вы вызываете функцию makeStyles , но ваша тема по-прежнему остается темой по умолчанию.
Решение — это то, что вы уже сделали, создайте CustomizedButton и внутри него вызывайте хук useStyles.