[React][MUI][Debug笔记] 为什么ThemeProvider不能渲染css格式至共用元件

重点

只想要知道解法请跳至解决方法。

前情提要

什么是MUI?
React元件库，该元件库涵盖了大多数的使用情境，我觉得还不错用。请参考MUI官方网站。什么是ThemeProvider?
MUI元件库中用来传递CSS主题(theme)的API。你可以事先设定一系列CSS style至主题(theme)中，并由ThemeProvider传递至各元件中，如:字型和颜色，甚至针对各种元件设定不同的CSS style，所以你可以透过ThemeProvider达成切换网站浅色/深色模式的功能。请参考MUI ThemeProvider官方文件说明。

适用情境

  ThemeProvider无法渲染CSS至其他专案或npm package的共用MUI元件，致原本设定好的CSS主题失效。(我就是在製作共用MUI元件库的过程中遇到这个问题。)

根本原因

  其他来源的共用元件自带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用来设定style的语法，属于所有元件都共用的语法，但在官方新手教学却没有特别提及和範例。我是搜寻stackoverflow才获得答案。因为使用人数似乎没有特别多，GOOGLE和ChatGPT都一问三不知，所以找答案特别痛苦。我寻找这问题的答案前前后后至少花了10小时。我理解有别于React等大架构的套件一定都会有这种问题，但我还是想要询问是否有人可以推荐其他元件套件吗?或者让我知道我不孤单。

参考文章

解决方法 stackoverflow : How to use Material UI from component library in a project with Material UI already?根本原因 stackoverflow : How to create a shared component library with MUI 5