时间戳

首页 > 解决方案 > 自定义 Material UI 滑块标签 - last-child

css - 自定义 Material UI 滑块标签 - last-child

问题描述

在 Material-ui 中，默认情况下 Slider 的标签看起来像位置居中：

滑块的标签文本居中

但我需要两个标签的位置之间的空格。像这样：

滑块的标签文本之间的空格

我对 markLabel 类使用 '&:last-child' 属性。根据文档https://material-ui.com/ru/api/slider/

此代码将仅对 markLabel 应用样式。但不适用于 '&:last-child'：

const theme = createMuiTheme({
  overrides: {
    MuiSlider: {
      markLabel: {
        color: "red",
        transform: "none",
        "&:last-child": {
          color: "green",
          transform: "translateX(-100%)"
        }
      },
    }
  }
});

这是沙盒：

https://codesandbox.io/s/material-ui-override-table-padding-on-last-child-forked-bt2lr?fontsize=14&hidenavigation=1&theme=dark

标签： cssreactjsmaterial-ui

解决方案

我有一个完全相同的问题，
但找不到任何好的解决方案。
所以我这样使用是因为我只有两个标签 - 开始和结束.....

  markLabel:{
    color:'#b3b3b3',
    fontFamily: "'Montserrat', sans-serif",
    fontWeight:700,
    marginTop:6,
    transform:'translateX(-100%)',
    '&[data-index="0"]' : {
      transform:'none'
    },
  },

推荐阅读