重点

使用MUI元件库提供的CssBaseline API即可渲染CSS设定至整个网页

目录

前情提要适用情境发生原因解决方法参考文章

前情提要

MUI元件库提供简洁设定的元件，该元件库涵盖所有使用者介面所需的元件，且功能相当完整。元件也容许一定程度的客製化(如:颜色、字型和字体大小等设定)，整体来说相当不错用，详细说明请参考MUI官方网站。什么是ThemeProvider?
MUI元件库中用来传递CSS主题(theme)的API。你可以事先设定一系列CSS style至主题(theme)中，并由ThemeProvider传递至各元件中，如:字型和颜色，甚至针对各种元件设定不同的CSS style，所以你可以透过ThemeProvider达成切换网站浅色/深色模式的功能。请参考MUI ThemeProvider官方文件说明。

适用情境

createTheme完成主题设定并使用ThemeProvider渲染主题后，开发者发现主题设定仅套用至元件上，却无法改变背景颜色。

发生原因

MUI的ThemeProvider可以简单改变MUI元件的CSS设定(毕竟就是MUI原生提供的API)。除此之外，MUI的ThemeProvider还可以设定网页原始CSS，以达到建立统一外观的目的(最常使用的就是改变背景颜色)。然而，ThemeProvider未有改变网页原始CSS的能力，所以导致网页原始CSS未随着设定改变。

解决方法

此时，开发者需要导入CssBaseline API来重新设定网页原始CSS，并让ThemeProvider发挥作用。 详细说明请参考CssBaseline官方文件说明

参考文章

CssBaseline官方文件说明