Как изменить цвета в реагирующем компоненте

Question

В реагирующей полосе мы можем установить цвета с помощью стилей по умолчанию (таких как основной, дополнительный, успех, предупреждение ...), но как мне изменить его с помощью шестнадцатеричного цветового кода? Например, как мне изменить «предупреждение» на «# 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 и укажите его в своем коде вместо стандартного загрузочного кода.