Semantic-UI-React进度条自定义着色

Question

我想动态更改我的Semantic-UI-React进度条的颜色（而不是预先设置的颜色）。

Progress组件的'color'属性仅接受预设值。当我通过style={{color: '#FFCC66'}}时，没有任何变化。当我通过style={{backgroundColor: '#FFCC66'}}时，进度条的颜色不会改变，只会改变背景的颜色。

我可以制作自定义CSS规则，但我想使用JavaScript动态更改颜色。

如何更改进度条的颜色？

Answer 1

如果您使用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"
/>

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