Как изменить цвет фона выбранного ToggleButton реагирующей начальной загрузки?

Question

Я использую реагирующий загрузчик и пытаюсь изменить цвет фона выбранного <ToggleButton> на синий.

например: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" value={...} onChange={...}> <ToggleButton ... /> <ToggleButton ... /> <ToggleButton ... /> </ToggleButtonGroup> </ButtonToolbar>

Таким образом, вместо темно-серого, который вы видите ниже для M / W / F, я бы хотел синий.Я пробовал миллиард трюков CSS и просто не могу его взять.Спасибо!

Answer 1

Вы можете сделать это с помощью CSS, добавив следующий класс и правило стиля.

! Важный необходим для переопределения стиля библиотеки реагирования при загрузке.

.Btn-Blue-BG.active {
  background-color: blue !important;
}

и

<ToggleButton className="Btn-Blue-BG" ...>

См. Демонстрацию ниже:

https://codesandbox.io/s/6nwkwnn29z

Answer 2

Вы пробовали добавить bsStyle="primary"?

<ButtonToolbar>
    <ToggleButtonGroup
        type="radio"
        name="options"
        value={...}
        onChange={...}>
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
      </ToggleButtonGroup>
    </ButtonToolbar>