【问题标题】：Semantic-UI-React progressbar custom coloringSemantic-UI-React 进度条自定义着色
【发布时间】：2019-09-26 17:50:09
【问题描述】：

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

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

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

如何更改进度条的颜色？

【问题讨论】：

你能解决这个问题吗？我有同样的问题

标签： semantic-ui semantic-ui-react

【解决方案1】：

如果你使用styled-component，可以处理。

1。在`styles.js` 中用`Progress` 声明样式组件

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)';

注意StyledProgressBar中的属性color

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

【讨论】：

【解决方案2】：

这是一个可能对你有用的例子

假设我有组件：

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;

要在进度条中添加颜色，您可以通过更改 style.css 中的类来覆盖 CSS：

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

这将改变你的进度条的颜色

【讨论】：

1。在styles.js 中用Progress 声明样式组件

2。渲染样式化的组件

1。在`styles.js` 中用`Progress` 声明样式组件