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

【问题标题】：Customize Material UI Slider Label - last-child自定义 Material UI 滑块标签 - last-child
【发布时间】：2020-10-01 06:54:11
【问题描述】：

在 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

【问题讨论】：

尝试使用:last-child 选择它不起作用，因为该元素不是最后一个子元素。

标签： css reactjs material-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

聚会迟到了，但我使用样式化的组件以一种 hacky 的方式解决了这个问题。也许在某些时候对某人有用。我的组件具有动态数量的标记，因此我使用传递给滑块的“max”参数来查找最后一个索引。

const StyledSlider = styled(Slider)`
  *[class*='MuiSlider-markLabel-'][data-index='0'] {
    transform: none;
  }

  *[class*='MuiSlider-markLabel-'][data-index='${({ max }) => max}'] {
    transform: translateX(-100%);
  }
`;

【讨论】：