Не получается добавить еще один класс для button в React

Question

Столкнулся с интересной проблемой. В своём приложении 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;
  }

Answer 1

Решил проблему с помощью hoc-компонента QuizButton.

import React from 'react';
import style from './QuizButton.module.scss';

function QuizButton(props) {
    return (
        <div className={style.QuizButton}>
            {props.children}
        </div>
    )
}

export default QuizButton;

В style задал стиль для кнопки. Обернул компонентом каждую кнопку в приложении:

<QuizButton>
    <button
        className={style.quizBtn__red}
    >В меню
    </button>
</QuizButton>

БЛОГ НА HUSL

Не получается добавить еще один класс для button в React

Ответы (1 шт):