[React][MUI][Debug筆記] 為什麼ThemeProvider不能渲染css格式至共用元件

react mui debug

greedy0101 2023-05-16 21:48:03 ‧ 1048 瀏覽

分享至

重點

只想要知道解法請跳至解決方法。

前情提要

什麼是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等大架構的套件一定都會有這種問題，但我還是想要詢問是否有人可以推薦其他元件套件嗎?或者讓我知道我不孤單。