React/Material-UI自定义主题中如何引用同主题内定义的变量？

问题原因 #

你写的代码不生效有两个核心问题：

• 语法错误：backgroundColor: {palette.primary.main} 属于错误的JS对象写法，属性值不需要额外包裹一层大括号
• 静态配置无法直接读取同主题的其他字段：你直接在createTheme的入参对象里写palette.primary.main是读取不到当前正在创建的主题实例的配置的

可行实现方案 #

一共有两种常用实现方式：

方案1：抽离公共变量提前定义 #

适合简单的复用场景，把需要跨模块引用的配置先单独声明，再分别传入主题配置的对应位置：

import { createTheme } from '@mui/material/styles';

// 提前抽离公共配置
const primaryMain = '#f6b1b2';

const theme = createTheme({
    palette: {
        primary: {
            main: primaryMain
        }
    },
    components: {
        MuiBottomNavigation: {
            styleOverrides: {
                root: {
                    backgroundColor: primaryMain
                },
            }
        }
    }
});

方案2：使用回调函数读取theme实例 #

MUI的styleOverrides支持传入回调函数，函数会接收当前主题实例作为入参，可以直接读取主题内的所有配置：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    palette: {
        primary: {
            main: '#f6b1b2'
        }
    },
    components: {
        MuiBottomNavigation: {
            styleOverrides: {
                root: ({ theme }) => ({
                    backgroundColor: theme.palette.primary.main
                }),
            }
        }
    }
});

这种方式更适合复杂的主题配置场景，不需要提前维护大量抽离的变量，直接读取主题实例的实时配置即可。

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