Как обрабатывать цвет значения индикатора выполнения в JSS?

Я создаю компонент индикатора выполнения, используя Typescript и JSS в реакции.

Мой компонент расширяется:

React.ProgressHTMLAttributes<Element>

Я могу создать компонент индикатора выполнения. Однако я не могу обрабатывать цвет значения в JSS.

Изображение доступно по ссылке.

В CSS,

Мы используем следующий код:

progress::-webkit-progress-value {
    background: green;
}

Это правильно работает в CSS. Однако я не знаю, как использовать его в JSS.

Я пробовал следующее: -

progress: {
        webkit: {
        value: {
          backgroundColor: "green"
        } }
      },

Если тип компонента передан как успех, цвет должен измениться на зеленый. Если тип компонента передан как ошибка, цвет должен измениться на красный. Таким образом, у меня есть оболочка «успеха» в моем JSS-файле.

success: {
     /* progress::-webkit-progress-value {
        background-color: green;
      }*/

      progress: {
        webkit: {
        value: {
          backgroundColor: "green"
        } }
      },
      /*'&:progress': {
        '&:webkit.value': {
          backgroundColor: 'green'
        },
      }*/
      //color: "green",
      //progress.value.backgroundColor: ""
      //webkit.progress.value.backgroundColor: "green"
      //progress.value.color: "green"
      //HTMLProgressElement.progress.webkit.value = 
    },

который вызывается, когда пользователь выбрал тип как зеленый.

[`${classes!.success}`]: type === ProgressIndicatorType.Success

Если тип компонента передан как успех, цвет должен измениться на зеленый. Если тип компонента передан как ошибка, цвет должен измениться на красный.


reactjs typescript jss
person Mansi    schedule 01.08.2019    source источник
comment
Добавление ссылки на игровую площадку jss с кодом индикатора выполнения — codesandbox. io/s/react-jss-playground-k09ye?fontsize=14   -  person Mansi    schedule 01.08.2019
comment
Можно отредактировать код цвета в классе стилей, чтобы поиграть с цветом значения прогресса - codesandbox.io/s/react-jss-playground-k09ye?fontsize=14   -  person Mansi    schedule 01.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

Если вы применяете имя класса успеха непосредственно к элементу прогресса, вам понадобится следующий JSS:

success: {
  '-webkit-appearance'       : 'none',
  'appearance'               : 'none',
  '&::-webkit-progress-value': {
    'backgroundColor': 'green',
  },
}

Здесь объясняется, почему вам нужно сбросить внешний вид.

https://css-tricks.com/html5-progress-element/#article-header-id-4

person Chris    schedule 01.08.2019

arrow_upward
1
arrow_downward

в JSS перед псевдоэлементами ставится амперсанд.

'&::-webkit-progress-value': {
    background: green;
}'
person Mosè Raguzzini    schedule 01.08.2019