Попытка применить тему к моему приложению, но пользовательская конфигурация не вступает в силу

В моем корневом файле index.tsx находится следующее:

const theme = createTheme({
  typography: {
    h4: {
      color: "red"
    }
  }
});

root.render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <AppRoutes />
    </ThemeProvider>
  </StrictMode>
);

В приложение вложен Домашняя страница.tsx, который имеет следующее:

// adding sx={headingStyle} to the header works
// but relying on the Theme does not work.
// const headingStyle = { color: "red" };

const HomePage: React.FC = () => {
  return (
    <Grid container direction="column">
      <Grid item>
        <Typography
          variant="h4"
          // sx={headingStyle}
          fontWeight="bold"
        >
          Home Page
        </Typography>
      </Grid>
    </Grid>
  );
};

Пример CodeSandbox.io

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш импорт из устаревшего пакета @mui/styles. Вместо этого импортируйте их из @mui/material/styles.

Таким образом, решение состоит в том, чтобы заменить createTheme и ThemeProvider импорт следующим образом:

import { createTheme, ThemeProvider } from "@mui/material/styles";

Вот фиксированная вилка: https://codesandbox.io/s/funny-voice-145qe6

Другие вопросы по теме