MUI自定义主题未生效：新增Button变体样式不加载且TS报错

核心问题及修复步骤： #

• 类型声明与实际变体名不匹配：你在TS扩展里声明的是dashed，但代码里用的变体名称是dashed1，导致TS校验不通过。把名称统一即可，下面示例统一用dashed1。
• return语句语法错误：return后直接换行，JS会自动补分号，导致组件返回undefined，ThemeProvider根本没渲染——这是样式不生效的核心原因。必须用括号把JSX包起来，或者让return和JSX在同一行。
• 主题色获取优化：无需单独创建defaultTheme，可以在样式里通过theme参数直接取配色，更贴合MUI的用法逻辑。

修正后的完整代码： #

import React, { FC } from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

// 统一变体名称为dashed1，与实际使用保持一致
declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    dashed1: true;
  }
}

const MyContainer: FC = (props: any) => {
  const myTheme = createTheme({
    components: {
      MuiButton: {
        variants: [
          {
            props: { variant: 'dashed1' },
            style: ({ theme }) => ({
              textTransform: 'none',
              border: `2px dashed ${theme.palette.primary.main}`,
              color: theme.palette.primary.main,
            }),
          },
          {
            props: { variant: 'dashed1', color: 'secondary' },
            style: ({ theme }) => ({
              border: `2px dashed ${theme.palette.secondary.main}`,
              color: theme.palette.secondary.main,
            }),
          },
          {
            props: { variant: 'dashed1', size: 'large' },
            style: {
              borderWidth: 4,
            },
          },
          {
            props: { variant: 'dashed1', color: 'secondary', size: 'large' },
            style: {
              fontSize: 18,
            },
          },
        ],
      },
    },
  });

  // 用括号包裹JSX，避免自动分号插入导致的渲染异常
  return (
    <ThemeProvider theme={myTheme}>
      <Button variant='dashed1'>HIII</Button>
      <Button variant='dashed1' color="secondary" size="large">Secondary Large</Button>
    </ThemeProvider>
  );
};

export default MyContainer;

额外说明： #

• 移除了// @ts-nocheck，现在TS不会再报错，因为类型声明和实际使用的变体名完全匹配。
• 样式改用({ theme }) => ({})的函数写法，直接从主题中获取颜色，比单独创建defaultTheme更可靠，也能适配主题的动态变化。
• 可以多渲染几个不同属性的按钮，验证变体组合是否正常生效。

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