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

未找到适配的Material UI组件,是否需用CSS自定义Toggle Button?

自定义Material UI切换按钮的可行方案

你不一定需要完全从零用CSS构建自定义切换按钮,可以先试试这两种思路:

  • 基于现有组件定制样式:Material UI的ToggleButton/ToggleButtonGroup(用于多选项切换)和Switch(用于二元开关)组件,都支持通过styled API、sx属性或者主题配置来修改样式。比如调整按钮的背景色、边框圆角、文本样式,或者修改开关的轨道、滑块外观,就能适配你需要的效果,还能复用组件自带的交互逻辑和无障碍特性。
  • 完全自定义组件:如果现有组件的结构没法满足你的需求,再考虑用基础HTML元素(比如<button>)配合CSS(或Material UI的样式工具)搭建切换按钮,自己通过useState管理切换状态。

优先推荐第一种方案,能节省开发时间,也更贴合Material UI的设计体系。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.25 11:06:20