Question

package.json依赖性：

"dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.2",
    "@mui/material": "^6.1.2",
    "@mui/styled-engine-sc": "^6.1.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-router-dom": "^6.26.2",
    "styled-components": "^6.1.13"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.2",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.11.1",
    "eslint-plugin-react": "^7.37.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.13",
    "vite": "^5.4.8"
  }

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

用最小的课程使用最小的代码，如下所示

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

要在按钮周围获得完美的圆圈，您也可以使用字体大小类，如下

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

Answer 1

在使用Tailwind CSS和MUI时，请检查MUI文档。

文献

如果您想使用tailwind CSS，则可以通过在tailwind.config.js

中设置重要选项来设置更多的优先级。

module.exports = {
  important: true,
}

Answer 2

也许您可以尝试shadcn/ui。材料UI通常是样式组件开发人员的首选，但是ShadCN/UI是基于尾风CSS的，并且具有这样的社交功能：

-Aw-shore-shadcn-ui

。”

---