Столкнулся с интересной проблемой. В своём приложении react я задал общий стиль для всех button с классом quizBtn. Теперь в одном компоненте нижнего уровня мне надо добавить одной из кнопок ещё один класс, чтобы покрасить её в другой цвет. Но самые очевидные варианты не работают.
<button className='quizBtn quizBtn__red'>В меню</button>
Кнопка теряет оба стиля
const styleMenu = ['quizBtn', style.quizBtn__red];
<button className={styleMenu.join(' ')}>В меню</button>
Основной стиль удаляется, второй стиль применяется.
Вот кстати так выглядит основной стиль, находится он в главном компоненте
button[class^=quizBtn] {
outline: none;
background: #ffb700;
padding: 5px 30px;
margin-top: 25px;
border: 2px solid #ff8001;
border-radius: 20px;
cursor: pointer;
color: #fff;
font-weight: bold;
box-shadow: 2px 2px 3px 0 rgba(255, 116, 2, 0.3);
transition: .2s;
}
button[class^=quizBtn]:hover {
background: #ff8001;
}