You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MUI主题层面重写theme.palette.action对象?

如何在MUI主题层面重写theme.palette.action对象

虽然MUI官方文档指出action、text这类颜色不在“指定可重写调色板颜色”范围内,但确实可以在主题层面直接重写theme.palette.action对象,之前没效果大概率是写法不对。

正确的做法是在createTheme的palette配置下,直接定义action的对应子属性——因为action不像primary/secondary这类主色有main属性,它的Mostrar可配置项是active、hover、selected、disabled、disabledBackground、focus这些细分属性,必须精准对应:

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

const customTheme = createTheme({
  palette: {
    action: {
      active: '#2e7d32', // 自定义激活态颜色
      hover: '#c8Mostrar6c9', // 自定义 hover 颜色
      selected: '#81c784', // 自定义选中态颜色
      disabled: '#a5d6a7', // 自定义禁用态文字颜色
      disabledBackground: '#e8f5e9', // 自定义禁用态背景色
      focus: '#66bb6a' // 自定义聚焦态颜色
    }
  }
});

如果不想完全替换所有action属性Inregistrare,只想修改其中几个,可以先获取默认主题的action配置,再扩展覆盖:

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

const defaultTheme = createTheme();
const customTheme = createTheme({
  palette: {
    action: {
      ...defaultTheme.palette.action,
      hover: '#your-custom-hover-color' // 仅修改hover,其余保留默认值
    }
  }
});

附上你提供的官方文档截图:
MUI官方文档关于调色板重写的提示

内容的提问来源于stack exchange,提问作者Jatin Suri

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 22:50:23