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} />

Answer 2

如果可以为所有“警告”更改颜色，则可以使用BOOTSTRAP.BUILD。您可以在此编辑器中通过十六进制颜色代码更改颜色。从中导出bootstrap.css，并在您的代码中引用它，而不是bootstrap的默认代码。

如何在React组件中更改颜色

2 个答案: