为什么 Tailwind CSS 类不能与 Material UI 一起使用 <Button>？

Question

我正在尝试制作一个带有 Material UI 图标的圆形按钮，但我的各种努力都未能产生所需的形状。我正在为我的项目创建一个 React.js 组件。

以下是我尝试过的不同方法：

import Button from '@mui/material/Button';
import MenuOpenIcon from '@mui/icons-material/MenuOpen';


/*----- Approach 1 ---------*/

<Button className='w-10 h-10 rounded-full'><MenuOpenIcon/></Button>


/*----- Approach 2 ---------*/

<Button
  sx={{
    width: '2.5rem',
    height: '2.5rem',  
    borderRadius: '9999px',
  }}
>
  <MenuOpenIcon />
</Button>


/*------ Approach 3 -------*/

import { styled } from '@mui/system';

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

const StyledButton = styled(Button)`@apply w-10 h-10 rounded-full;`;


<StyledButton><MenuOpenIcon /></StyledButton>

Answer 1

使用 Tailwind CSS 和 MUI 时查看 MUI 文档。

文档

如果你想使用 Tailwind CSS，你可以通过在 tailwind.config.js 中将 important 选项设置为 true 来设置 more 的优先级

module.exports = {
  important: true,
}

---

但是使用多个 CSS 框架并不是一种好的做法。