Пользовательская окраска полосы прогресса Semantic-UI-React

Я хочу динамически изменять цвет индикатора прогресса Semantic-UI-React (не из предварительно заданных цветов).

Свойство color компонента Progress принимает только заранее заданные значения. Когда я прохожу style={{color: '#FFCC66'}}, ничего не меняется. Когда я прохожу style={{backgroundColor: '#FFCC66'}}, цвет прогрессбара не меняется, только цвет фона.

Я могу создать пользовательское правило CSS, но я хочу динамически менять цвет с помощью JavaScript.

Как я могу изменить цвет моего индикатора прогресса?


semantic-ui-react semantic-ui
person StragaSevera    schedule 14.11.2017    source источник
comment
вы могли бы решить это? У меня точно такая же проблема   -  person Emmanuel Garcia Martinez    schedule 19.08.2018

Ответы (2)


arrow_upward
1
arrow_downward

Если вы используете styled-component, это можно обработать.

1. Объявите стилизованный компонент с Progress в styles.js

import { Progress } from 'semantic-ui-react';
export const StyledProgressBar = styled(Progress)`
  & > .bar {
    background-color: ${props => props.color || 'green'} !important;
  }
`;

2. Рендерим стилизованный компонент

const myCustomColor = 'rgb(200, 200, 255)';

Обратите внимание на атрибут color в StyledProgressBar

<StyledProgressBar
  color={myCustomColor}
  style={{ width: progressBarWidth, margin: 0 }}
  percent={10}
  size="tiny"
/>
person Jay Lim    schedule 26.09.2019

arrow_upward
0
arrow_downward

Вот пример, который, вероятно, работает для вас

предположим, у меня есть компонент:

import React, { Component } from 'react';
import 'semantic-ui-css/semantic.min.css';  
import {Container, Grid ,Progress } from 'semantic-ui-react';
import './style.css'                      

class LoginComponent extends Component { 
  render() {
    return (
      // Start Login Container
      <div className="login-container">                
      <Grid centered>
        <Grid.Column mobile={16} tablet={9} computer={9}>
          <Container>            
            <Progress percent={30} inverted progress >
              error
            </Progress>
          </Container>
        </Grid.Column>
      </Grid>
    </div>
    //End Login Container
    );
  }
}

export default LoginComponent;

Чтобы добавить цвет в индикатор выполнения, вы можете переопределить CSS, изменив класс в вашем style.css, выполнив следующие действия:

.ui.inverted.progress .bar{
  background: pink
}

Это изменит цвет вашего индикатора выполнения.

person Hitarthi Panchal    schedule 03.12.2018