Как настроить цвета больших пальцев и меток в динамическом слайдере пользовательского интерфейса материала в React? ⇐ CSS

[Anonymous]

Я использую компонент Slider из Material UI (MUI) в проекте React с TypeScript. Мне нужно настроить цвета ползунка и меток в зависимости от их положения на слайдере.
На слайдере 4 ползунка и 4 метки:

• Отметки и отметки должны иметь следующие цвета:

• 0 и minValue: Цвет # 6baa00.
• maxValue: Цвет #ffcc00.
• 100: Цвет #ff0000.

Кроме того, к направляющей ползунка применен динамический градиент.
Однако, когда я пытаюсь реализовать эти стили:

• Большие пальцы кажутся прозрачными.
• Знаки иногда не сохраняют желаемый вид. цвета.

Ниже представлена ​​моя текущая реализация:

Код: Выделить всё

const DynamicSlider = styled(Slider)(({ railGradient }) => ({
color: 'transparent', // Hide the default main line
height: 8,
'& .MuiSlider-track': {
display: 'none', // Hide the default tracks
},
'& .MuiSlider-rail': {
background: railGradient, // Dynamic gradient
opacity: 1,
height: 8,
},
'& .MuiSlider-thumb': {
width: 16,
height: 16,
border: '2px solid #fff',
'&:nth-of-type(1)': {
backgroundColor: '#6baa00', // Color for the 0 thumb
},
'&:nth-of-type(2)': {
backgroundColor: '#6baa00', // Color for the minValue thumb
},
'&:nth-of-type(3)': {
backgroundColor: '#ffcc00', // Color for the maxValue thumb
},
'&:nth-of-type(4)': {
backgroundColor: '#ff0000', // Color for the 100 thumb
},
'&:focus, &:hover, &.Mui-active': {
boxShadow: '0 0 0 8px rgba(0, 0, 0, 0.16)',
},
},
'& .MuiSlider-mark': {
backgroundColor: 'transparent',
width: '8px',
height: '8px',
},
"& .MuiSlider-mark[data-index='0']": {
backgroundColor: '#6baa00',
},
"& .MuiSlider-mark[data-index='1']": {
backgroundColor: '#6baa00',
},
"& .MuiSlider-mark[data-index='2']": {
backgroundColor: '#ffcc00',
},
"& .MuiSlider-mark[data-index='3']": {
backgroundColor: '#ff0000',
},
}));

Проблема:

• Элементы кажутся прозрачными, хотя определенные цвета назначены с использованием n-го типа.< /li>
  Знаки не всегда сохраняют правильный цвет.

Картинка проблемы
Как я могу динамически и последовательно устанавливать определенные цвета для больших пальцев и меток в соответствии с дизайном? требования?
Будем очень признательны за любые рекомендации или примеры реализации для решения этой проблемы. Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -ui-slider