Semantic-UI-React progressbar custom coloring

Question

I want to dynamically change my Semantic-UI-React progressbar's color (not from the pre-set colors).

The 'color' property of the Progress component accepts only pre-set values. When I pass style={{color: '#FFCC66'}}, nothing changes. When I pass style={{backgroundColor: '#FFCC66'}}, the color of the progressbar does not change, only the color of the background.

I can make a custom CSS rule, but I want to change the color dynamically, using JavaScript.

How can I change the color of my progressbar?

Answer 1

If you use styled-component, it can be handled.

1. Declare styled component with Progress in styles.js

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

2. Render the styled component

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

Note attribute color in StyledProgressBar

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

Answer 2

Here is the example which probably work for you

suppose I have component:

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;

To add color in progress bar you can override CSS by changing class in your style.css by doing this:

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

This will change your Progress bar's color