You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何应用MUI组件主题?无需styled/sx复用MUI Button样式的方法

给自定义按钮套用MUI Button样式的简便方案

不用写大量CSS也能实现,这里有几个直接实用的方法:

  • 直接复用MUI Button的预设类名
    MUI原生Button渲染后会带有一系列预设类名,比如MuiButton-root、MuiButton-contained、MuiButton-sizeMedium这类,你直接把这些类名加到自己的<button>标签上就行。举个例子:

    <button class="MuiButton-root MuiButton-outlined MuiButton-sizeMedium">我的自定义按钮</button>
    

    具体要加哪些类,打开浏览器开发者工具查看MUI Button的DOM结构就能获取,根据你想要的按钮类型(填充型/轮廓型/文字型)、尺寸大小选择对应的类即可。

  • 全局引入MUI基础样式统一环境
    记得在项目中引入MUI的CssBaseline组件,它会重置全局基础样式,避免浏览器默认样式干扰,让自定义按钮和MUI Button的视觉表现保持一致。

如果需要动态切换样式,还可以结合MUI的useTheme钩子配合样式生成工具,但大多数场景下直接复用类名就足够简单高效。

内容的提问来源于stack exchange,提问作者user6606859

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.25 01:19:53