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

Question

我想动态更改 Semantic-UI-React 进度条的颜色(不是从预设颜色)。

Progress 组件的“颜色”属性仅接受预设值。当我通过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"
/>