我在Reaction项目中使用MUI的Slider组件,如下所示:

<Slider
          id={name}
          aria-label="Restricted values"
          defaultValue={defaultValue}
          getAriaValueText={valuetext}
          step={step}
          value={value}
          valueLabelDisplay={valueLabelDisplay}
          marks={options}
          onChange={onChange}
          onClick={triggerValidation || null}
          min={min}
          max={max}
          disabled={disabled}
        />

现在它是html,第一个marksLabel值如下所示:

<span aria-hidden="true" data-index="0" class="MuiSlider-markLabel-jynbEM hiERdh MuiSlider-markLabel MuiSlider-markLabelActive" style="left: 0%;">400</span>

我想要将左侧:0%更改为3%,或者给这个markLabel的第一个也是最后一个实例设置左边距和右边距.

我试过这个:

    .MuiSlider-markLabel {
      color: #a3b2cc;

      &:first-child {
        left: 3% !important;
        margin-left: 20px;
      }
    }

但这并不管用.我遗漏了什么?

推荐答案

try 使用数据属性:

.MuiSlider-markLabel[data-index="0"]{
    left: 3% !important;
    margin-left: 20px;
}

有关更详细的说明,请参阅以下内容: https://css-tricks.com/a-complete-guide-to-data-attributes/

Css相关问答推荐

为什么图像加载请求没有显示在我的网络请求中?

如何使用 Sass to CSS 创建 H1 到 H6 标题并减小字体大小

努力将 CSS 样式应用于 Elm 应用程序

最多 2 行的 Flex 水平滚动

当页面大小小于VH时,Tailwind CSS如何使页脚留在底部

使用 display:inline-block 渲染多行文本组件,行间有白色间隙

BootStrap:右对齐嵌套手风琴

直观地指示 IFrame 内的表单正在提交,但没有 javascript

在表格中隐藏绝对伪元素

更改组件中 css 的值

基于变量动态生成 CSS 类 - SCSS

仅对父容器应用模糊效果

我应该避免使用text-align: justify;吗?

在固定高度的输入字段中垂直对齐文本而不显示:表格或填充?

属性nowrap被认为是过时的.建议使用较新的构造.它是什么?

水平列表项

最大宽度与最小宽度

CSS:在图像周围创建白光

thead 和 tbody 之间的间距

将 webkit 滚动条样式应用于指定元素