如何在Creative Tim Material Dashboard 2中切换使用原生Material UI组件样式？

1. 导入原生Material UI组件 #

确保导入@mui/material下的原生组件，而非Creative Tim封装的版本：

import { Grid, Box, Tabs, Tab, Typography } from '@mui/material';
import { useState } from 'react';

2. 实现样式隔离组件UseMaterialUIStyling #

创建自定义组件，通过临时切换到原生MUI主题，隔离Creative Tim的自定义样式：

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

// 生成原生MUI基础主题，绕过Creative Tim的定制主题配置
const nativeMuiTheme = createTheme();

export function UseMaterialUIStyling({ children }) {
  return (
    <ThemeProvider theme={nativeMuiTheme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

3. 在组件中使用并实现样式切换 #

通过状态控制是否启用原生MUI样式，实现动态切换：

export default function YourComponent() {
  const [value, setValue] = useState(0);
  const [useNativeStyle, setUseNativeStyle] = useState(true); // 控制样式切换状态

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const a11yProps = (index) => {
    return {
      id: `basic-tab-${index}`,
      'aria-controls': `basic-tabpanel-${index}`,
    };
  };

  const TabPanel = (props) => {
    const { children, value, index, ...other } = props;
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`basic-tabpanel-${index}`}
        aria-labelledby={`basic-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box sx={{ p: 3 }}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  };

  return (
    <Grid container spacing={3}>
      <Grid item xs={12}>
        {/* 样式切换按钮 */}
        <button onClick={() => setUseNativeStyle(!useNativeStyle)}>
          {useNativeStyle ? '切换到Creative Tim样式' : '切换到原生MUI样式'}
        </button>
      </Grid>
      <Grid item xs={12}>
        {/* 根据状态决定是否启用原生样式隔离 */}
        {useNativeStyle ? (
          <UseMaterialUIStyling>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
              <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
                <Tab label="Item One" {...a11yProps(0)} />
                <Tab label="Item Two" {...a11yProps(1)} />
                <Tab label="Item Three" {...a11yProps(2)} />
              </Tabs>
            </Box>
            <TabPanel value={value} index={0}>Item One</TabPanel>
            <TabPanel value={value} index={1}>Item Two</TabPanel>
            <TabPanel value={value} index={2}>Item Three</TabPanel>
          </UseMaterialUIStyling>
        ) : (
          {/* 不隔离时自动使用Creative Tim的自定义样式 */}
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
              <Tab label="Item One" {...a11yProps(0)} />
              <Tab label="Item Two" {...a11yProps(1)} />
              <Tab label="Item Three" {...a11yProps(2)} />
            </Tabs>
          </Box>
        )}
      </Grid>
    </Grid>
  );
}

替代方案：直接强制覆盖样式 #

若不想使用主题隔离，可通过sx属性直接覆盖Tabs样式，还原原生MUI效果：

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="basic tabs example"
  sx={{
    '& .MuiTabs-indicator': {
      backgroundColor: '#1976d2', // 原生MUI指示器蓝色
    },
    '& .MuiTab-root': {
      textTransform: 'none',
      fontWeight: 500,
      color: '#666',
      '&.Mui-selected': {
        color: '#1976d2',
      },
    },
  }}
>
  {/* Tab项 */}
</Tabs>

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