如何解决Pigment CSS中ThemeProvider主题不生效的问题？

问题描述 #

按照文档说明使用Pigment CSS结合ThemeProvider和createTheme创建主题化应用，但配置的主题未加载。使用的依赖版本：@mui/base 5.0.0-beta.8、@mui/system 5.14.1、@emotion/react 11.11.1。

相关代码：

App.tsx #

import { ReactElement } from "react";
import {ThemeProvider} from "@mui/system";
import {myTheme} from "./themes/mytheme.tsx";

export default function RdApp(): ReactElement {
    return <ThemeProvider theme={myTheme}>
        <div>Hello world</div>
    </ThemeProvider>
}

themes/mytheme.ts #

import {createTheme} from "@mui/system";

export const myTheme = createTheme({
    typography: {
        fontFamily: "Arial"
    },
});

解决原因及方案 #

ThemeProvider仅负责将主题上下文注入应用，不会自动将主题样式应用到原生元素。需通过以下方式主动消费主题配置：

方案1：使用sx属性直接应用主题样式 #

修改App.tsx，通过sx属性从主题中读取字体配置并应用到元素：

import { ReactElement } from "react";
import { ThemeProvider, sx } from "@mui/system";
import { myTheme } from "./themes/mytheme.tsx";

export default function RdApp(): ReactElement {
  return (
    <ThemeProvider theme={myTheme}>
      <div sx={{ fontFamily: (theme) => theme.typography.fontFamily }}>Hello world</div>
    </ThemeProvider>
  );
}

方案2：用styled创建主题化组件 #

通过styled方法封装原生元素，在样式中消费主题：

import { ReactElement } from "react";
import { ThemeProvider, styled } from "@mui/system";
import { myTheme } from "./themes/mytheme.tsx";

const StyledDiv = styled('div')(({ theme }) => ({
  fontFamily: theme.typography.fontFamily,
}));

export default function RdApp(): ReactElement {
  return (
    <ThemeProvider theme={myTheme}>
      <StyledDiv>Hello world</StyledDiv>
    </ThemeProvider>
  );
}

方案3：全局应用主题样式（如全局字体） #

使用GlobalStyles组件将主题配置应用到全局元素：

import { ReactElement } from "react";
import { ThemeProvider, GlobalStyles } from "@mui/system";
import { myTheme } from "./themes/mytheme.tsx";

export default function RdApp(): ReactElement {
  return (
    <ThemeProvider theme={myTheme}>
      <GlobalStyles styles={{
        body: {
          fontFamily: myTheme.typography.fontFamily,
        },
      }} />
      <div>Hello world</div>
    </ThemeProvider>
  );
}

内容的提问来源于stack exchange，提问作者robbit