MUI 滑块组件:不同颜色的拇指
P粉709644700
P粉709644700 2023-09-08 22:49:51
[CSS3讨论组]

MUI 有一个滑块组件:https://mui.com/material-ui/react-slider/

我目前正在使用它来允许用户选择一个值范围(所以我的滑块有两个拇指) MUI 多拇指滑块文档:https://codesandbox.io/s/gptppq?file=/demo.js

滑块拇指的样式可以如下所示:https://codesandbox.io/s/359l9t?file=/demo.tsx:3809-3812

我的问题:如何使两个拇指具有不同的样式/颜色?

P粉709644700
P粉709644700

全部回复(1)
P粉748218846

您可以通过针对data-index prop 通过 CSS 属性选择器.例如:

<Slider
  value={value}
  onChange={handleChange}
  sx={{
    "& .MuiSlider-thumb": {
      "&[data-index='0']": {
        backgroundColor: "pink"
      },
      "&[data-index='1']": {
        backgroundColor: "yellow"
      }
    }
  }}
/>

产生:

工作 CodeSandbox: https://codesandbox.io/s/mui-individually-styled-thumbs-c5m2q9

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号