react + TS + material-ui如何创建一个自己的主题,例如Button组件实现

在 MUI v5 中创建自定义主题并将其应用于组件（例如 Button）可以通过以下步骤实现：

1. 创建自定义主题：使用 createTheme 函数来创建一个自定义主题。
2. 使用 ThemeProvider：将自定义主题应用到整个应用或特定组件。
3. 自定义组件样式：使用 styled 或 sx 属性来定制组件的样式。

以下是一个示例，展示如何为 Button 创建自定义主题并应用：

1. 创建自定义主题

首先，创建一个自定义主题文件 theme.ts：

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2', // 自定义主色
    },
    secondary: {
      main: '#dc004e', // 自定义次色
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8, // 自定义圆角
          textTransform: 'none', // 禁用大写
        },
      },
    },
  },
});

export default theme;

2. 使用 ThemeProvider 应用主题

在你的应用入口文件（如 index.tsx 或 App.tsx）中使用 ThemeProvider 应用自定义主题：

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import App from './App';
import theme from './theme';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

3. 自定义组件样式

如果你想进一步自定义 Button 组件，可以使用 styled 函数：

import React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.common.white,
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
  borderRadius: '12px', // 自定义圆角
  textTransform: 'none', // 禁用大写
}));

const App: React.FC = () => {
  return (
    <div>
      <CustomButton variant="contained">Custom Themed Button</CustomButton>
    </div>
  );
};

export default App;

4. 使用 sx 属性

你也可以使用 sx 属性对单个组件进行样式调整：

import React from 'react';
import Button from '@mui/material/Button';

const App: React.FC = () => {
  return (
    <div>
      <Button
        variant="contained"
        sx={{
          backgroundColor: 'primary.main',
          color: 'common.white',
          '&:hover': {
            backgroundColor: 'primary.dark',
          },
          borderRadius: '12px',
          textTransform: 'none',
        }}
      >
        Custom Themed Button
      </Button>
    </div>
  );
};

export default App;

通过以上步骤，你可以轻松地为 Button 组件创建并应用自定义主题。你可以根据需要调整主题的其他部分，例如 palette、typography 等，以满足你的设计要求。

---

更为完整的部分 >>>>>>>>

---

更详细地定义 Button 组件的各种状态（如静态展示、悬停、激活等）。使用 styled 函数时，可以为组件的不同状态添加样式。

以下是一个更为完整的示例，展示如何为 Button 组件定义多种状态的样式：

import React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main, // 默认背景色
  color: theme.palette.common.white, // 默认文本颜色
  borderRadius: '12px', // 自定义圆角
  textTransform: 'none', // 禁用大写
  padding: '8px 16px', // 内边距

  // 悬停状态
  '&:hover': {
    backgroundColor: theme.palette.primary.dark, // 悬停背景色
    color: theme.palette.common.white, // 悬停文本颜色
  },

  // 激活状态
  '&:active': {
    backgroundColor: theme.palette.primary.darker, // 激活背景色
    color: theme.palette.common.white, // 激活文本颜色
  },

  // 禁用状态
  '&.Mui-disabled': {
    backgroundColor: theme.palette.action.disabledBackground, // 禁用背景色
    color: theme.palette.action.disabled, // 禁用文本颜色
  },

  // 聚焦状态
  '&:focus': {
    outline: `2px solid ${theme.palette.primary.light}`, // 聚焦外边框
    outlineOffset: '2px', // 聚焦外边框偏移
  },

  // 其他自定义状态
  '&:visited': {
    backgroundColor: theme.palette.primary.light, // 访问过的背景色
    color: theme.palette.common.white, // 访问过的文本颜色
  },
}));

const App: React.FC = () => {
  return (
    <div>
      <CustomButton variant="contained">Custom Themed Button</CustomButton>
      <CustomButton variant="contained" disabled>
        Disabled Button
      </CustomButton>
    </div>
  );
};

export default App;

解释

1. 默认状态：

   • backgroundColor: theme.palette.primary.main：设置按钮的默认背景色。
   • color: theme.palette.common.white：设置按钮的默认文本颜色。

2. 悬停状态：

   • &:hover：通过伪类 &:hover 设置按钮在悬停时的背景色和文本颜色。

3. 激活状态：

   • &:active：通过伪类 &:active 设置按钮在激活时的背景色和文本颜色。

4. 禁用状态：

   • &.Mui-disabled：通过类选择器 &.Mui-disabled 设置按钮在禁用时的背景色和文本颜色。

5. 聚焦状态：

   • &:focus：通过伪类 &:focus 设置按钮在聚焦时的外边框和偏移。

6. 访问过的状态：

   • &:visited：通过伪类 &:visited 设置按钮在访问过时的背景色和文本颜色。

通过这种方式，你可以为 Button 组件定义各种状态的样式，确保在不同交互状态下按钮的外观符合你的设计需求。如果有其他特定状态需要定义，可以继续添加相应的伪类或类选择器。