Краткое содержание

Если вы хотите узнать только решение, перейдите к шагам «Решения».

Соответствующие знания

  • Что такое MUI?
    MUI — это библиотека компонентов React, которая охватывает большинство сценариев использования и весьма полезна. Пожалуйста, обратитесь к официальному сайту MUI.
  • Что такое ThemeProvider?
    ThemeProvider — это API в библиотеке компонентов MUI, используемый для передачи тем CSS. Вы можете предварительно определить ряд стилей CSS в теме и передать их различным компонентам с помощью ThemeProvider. Сюда входят шрифты, цвета и даже разные стили CSS для разных компонентов. Таким образом, вы можете использовать ThemeProvider для достижения функциональности переключения между светлым и темным режимами на веб-сайте. Пожалуйста, обратитесь к официальной документации MUI ThemeProvider.

Вариант использования

ThemeProvider не может отображать стили CSS для общих компонентов MUI в других проектах или пакетах npm, что приводит к неэффективности первоначально установленной темы CSS. (Я столкнулся с этой проблемой, работая над общей библиотекой компонентов MUI)».

Первопричина

Общие компоненты из других источников поставляются со своим собственным кодом рендеринга MUI. Когда веб-страница начинает рендеринг, код рендеринга MUI как исходного проекта, так и других источников будет выполняться одновременно. Кроме того, стили CSS, отображаемые из других источников, имеют более высокую специфичность, чем стили CSS исходного проекта, в результате чего тема CSS исходного проекта становится неэффективной.

Решения

Поскольку внешние компоненты поставляются со своим собственным кодом рендеринга MUI, пусть они также экспортируют свой собственный. В исходном проекте передайте настройки темы CSS внешнему ThemeProvider. Этот метод позволяет внешним компонентам получать доступ к теме CSS.

Пример

Внешний компонент

import React from "react";
import { Theme, ThemeProvider} from "@mui/material/styles";

export interface ThemeInheritorProps  {
  theme: Theme;
  children: React.ReactNode
};

export default function ThemeInheritor({ theme, children }: ThemeInheritorProps) {
  return (
      <ThemeProvider theme={theme}>
          {children}
      </ThemeProvider>
  );
}

Оригинальный компонент проекта

import { ThemeInheritor } from "YOURLIBRARY";

...

<StyledEngineProvider injectFirst>
  <ThemeProvider theme={muiTheme}>
    <ThemeInheritor theme={muiTheme}>
    ...
    </ThemeInheritor>
  </ThemeProvider>
</StyledEngineProvider>

Мое мнение

Вышеупомянутый метод может решить проблему невозможности использования ThemeProvider с общими компонентами. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне обратную связь. Честно говоря, я работал над несколькими проектами с использованием MUI, и у меня сложилось впечатление, что MUI удобен в использовании, но еще есть возможности для улучшения. В основном это связано с двумя моментами:

Структура официальной документации не очень интуитивно понятна, обычно она содержит несколько примеров и ограниченные пояснения. Даже после прочтения официальной документации я все еще был в замешательстве. Например, «sx» — это синтаксис, используемый MUI для установки стилей, и это синтаксис, общий для всех компонентов, но он специально не упоминается и не демонстрируется в официальном руководстве для начинающих. Мне пришлось поискать в Stack Overflow, чтобы найти ответы.

Поскольку пользовательская база кажется относительно небольшой, ни Google, ни ChatGPT не осведомлены о запросах, связанных с MUI, что особенно затрудняет поиск ответов. Я потратил не менее 10 часов на поиски ответа на эту проблему. Я понимаю, что пакеты, отличные от MUI, в популярных фреймворках, таких как React, также могут иметь аналогичные проблемы, но я все же хочу спросить, может ли кто-нибудь порекомендовать другие библиотеки компонентов или сообщить мне, что я не одинок, сталкиваясь с этими проблемами.

Ссылка

Решение проблемы с переполнением стека: «Reactjs — Как использовать Material UI из библиотеки компонентов в проекте с Material UI? - Переполнение стека"

Основная причина переполнения стека: material ui — Как создать общую библиотеку компонентов с MUI 5 — переполнение стека