Блог

Как правильно изменить цвет переключателя react-boostrap? По умолчанию используется синий цвет, но я просто хочу изменить его на любой случайный цвет правильным способом.

Я использую ReactJS, и я рендерю свой переключатель следующим образом:

 const Radio = ({
    id, type, name, checked, onChange, variant,
}) => (
    <ToggleButton id={id} type={type} name={name} checked={checked} onChange={onChange} variant={variant} />
);
  

Это вопрос добавления имени класса, в которое возвращается этот компонент, и внесения обновления в css? Если да, пожалуйста, сообщите.

Заранее спасибо.

Это вопрос добавления имени класса, в которое возвращается этот компонент, и внесения обновления в css

Это один из способов сделать это. Однако, если вы хотите настроить таргетинг конкретно на этот вариант (или переопределить существующие варианты, например primary ), вы можете сделать что-то вроде этого:

 .btn-custom-variant {
  background: orange;
}

<ToggleButton variant="custom-variant"/>
  

Ссылка: https://react-bootstrap.netlify.app/getting-started/theming/#custom-styles-variants

Как правило, не существует «правильного» способа сделать это. Это полностью зависит от вашей интерфейсной архитектуры.