Изменение цветов ToggleButton из реакции-загрузки
У меня есть группа ToggleButtons в моем приложении, цвета фона которой я хотел бы изменить. В настоящее время мой код дает всем кнопкам градиент <.untoggled-button>, а невыбранные кнопки имеют этот градиент с добавленной синей пленкой. У меня две проблемы: я хочу удалить синюю пленку на непереключаемых кнопках, и мне нужно получить доступ к переключаемой кнопке, чтобы изменить ее стиль. <.toggled-button> — это просто заполнитель, который сейчас ничего не делает.
Мне интересно, как получить доступ к непроверенным и проверенным версиям ToggleButtons в моем css, чтобы переопределить стиль начальной загрузки по умолчанию!
jsx:
<ToggleButtonGroup className = "view" type = "radio" name = "options" defaultValue = {2}>
<ToggleButton value = {1} className = "untoggled-button" > title</ToggleButton>
<ToggleButton value = {2} className = "untoggled-button"> title</ToggleButton>
<ToggleButton value = {3} className = "untoggled-button"> title</ToggleButton>
</ToggleButtonGroup>
css (это очень неправильно, но я надеюсь, что смогу стилизовать как непроверенные, так и проверенные кнопки):
.untoggled-button{
background-image: some gradient !important;
}
.toggled-button {
background-image: another gradient !important;
}
@MarioPerez готов!! не уверен, насколько это полезно, но это моя основная логика (я удалил обработчики, чтобы их было легче читать)
@sun ты пробовал добавить !important к своему фоновому изображению?
@Джон, да! извините, я отредактирую свой вопрос, чтобы уточнить, но мой текущий код делает то, что выбранная кнопка имеет градиент <.untoggled-button>, а невыбранные кнопки имеют тот же градиент с добавленной синей пленкой. Я не уверен, как получить доступ к стилю переключаемой кнопки (.toggled-button) — это просто заполнитель, и как удалить синюю пленку по умолчанию.
@sun, я думаю, что bootstrap добавляет класс collapsed, так что, возможно, попробуйте что-то вроде .collapsed {background-image: Your Gradient;}
Ответы 1
установка прозрачного цвета фона и добавление класса .active, похоже, сработали!
.untoggled-button{
background-image: some gradient !important;
background-color: transparent !important;
}
. untoggled-button.active {
background-image: another gradient !important;
}
Привет, солнце, можешь включить код для этого компонента, о котором ты говоришь?