如何提取MUI组件默认样式？获取Button的minWidth等默认值方法

MUI的样式都是动态生成的，所以你在node_modules里找不到静态CSS文件，给你几个实用的方法：

• 查官方文档：直接去MUI的Button组件文档，找「CSS」板块，里面会明确标出来默认的minWidth是64px（针对默认的contained类型按钮），其他类型按钮的默认值也会同步列出。
• 在代码里直接获取：在React项目中，用MUI的useTheme钩子就能拿到主题里的默认组件样式。举个实际例子：

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

function YourComponent() {
  const theme = useTheme();
  // 获取contained类型Button的默认minWidth
  const defaultMinWidth = theme.components.MuiButton.variants.find(v => v.variant === 'contained').style.minWidth;
  console.log(defaultMinWidth); // 输出 64px
  return <div>初始宽度值：{defaultMinWidth}</div>;
}

只要你没自定义过主题，这个方法就能直接拿到官方默认值。

• 查看组件源码：去node_modules的@mui/material/Button目录里找样式相关文件（比如ButtonStyles.js），里面直接写着各个类型按钮的默认样式规则，比如contained按钮的minWidth: '64px'。
• 用浏览器开发者工具查看：在页面上渲染一个未修改样式的Button，打开浏览器控制台的元素面板，查看该按钮的计算样式，就能直接看到min-width的默认值。

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