自定义材质UI滑块标签-最后一个

Question

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

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

我将'＆：last-child'属性用于markLabel类。根据文档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%)"
        }
      },
    }
  }
});

这是SandBox：

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

Answer 1

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

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

Answer 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%);
  }
`;