reactjs - 如何改变 react 组件的颜色

Question

在reactstrap中，我们可以使用默认样式设置颜色(例如主要、次要、成功、警告......)，但是如何使用十六进制颜色代码更改它？ 例如，如何将“警告”更改为“#008080”？

<AppSwitch
  className={'mx-1'}
  variant={'pill'}
  color={'warning'} //it dones't work with {'#008080'}
  default checked
  onChange={this.handler} />

我也尝试过类似的方法，但也没有成功:

state = {
  color: '#008080'
}


<AppSwitch
  className={'mx-1'}
  variant={'pill'}
  color={'this.state.color'} 
  default checked
  onChange={this.handler} />

Answer 1

你应该在常量中定义它:

const hexColor = {
  color: '#008080'
};

<AppSwitch
  className={'mx-1'}
  variant={'pill'}
  color={hexColor[color]} //it dones't work with {'#008080'}
  default checked
  onChange={this.handler} />