MUI：使用 tailwind 类自定义按钮组件

Question

我正在尝试自定义 MUI 组件的外观<Button />。因为我想通过使用tailwind类来做到这一点，所以我尝试使用defaultProps而不是styleOverrides.

const lightTheme = createTheme({
  components: {
    MuiButton: { defaultProps: { classes: { root: 'p-8' } } },
  },
});

tailwind它工作正常，只是我在使用该组件时无法添加类<Button />，因为这将覆盖我上面所做的更改。

<Button variant="contained" classes={{ root: 'p-12' }}>
  Ok
</Button>

有没有办法扩展 prop 的定义classes而不是覆盖它？

Answer 1

如果您想扩展类而不覆盖它们，您可以使用clsx之类的实用程序来组合 defaultProps 中的类和您的自定义类。

以下是实现这一目标的方法：

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

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: {
        classes: { root: 'p-8' },
      },
    },
  },
});

function CustomButton() {
  return (
    <ThemeProvider theme={theme}>
      <Button
        variant="contained"
        classes={{
          root: clsx('p-12', theme.components.MuiButton.defaultProps.classes.root),
        }}
      >
        Ok
      </Button>
    </ThemeProvider>
  );
}

export default CustomButton;

查看