Передача Classname из контейнера к компоненту без перезаписи существующих один

Question

Скажет, у нас есть компонент Button, что внутри его использование определения className для укладки:

const Button = props => (
    const { children, ...otherProps } = props 
    <button className={styles.someClass} {...otherProps}> {props} </button> 
) 

Я чем использовать этот компонент в контейнере, но мне нужно пройти это имя класса еще раз, что является специфическим для этого контейнера, так <Button className={styles.red}>Some Text</Button> это означает, что теперь я получаю сообщение об ошибке, как я прохожу в дополнительном Classname, и определяющее что-то подобное в каждом компоненте:

const Button = props => (
     const { children, className, ...otherProps } = props 
     <button className={`${styles.someClass} ${className}`} {...otherProps}> {props} </button> 
    ) 

S это похоже на переутомление, поэтому я хотел посмотреть, существует ли обычная практика для обработки этого варианта использования.

Answer 1

Прежде всего я предлагаю https://github.com/JedWatson/classnames, он отлично работает с React.

Как я обрабатываю эти случаи, у вас есть кнопка поддержки под названием classNames, и она принимает строку. Затем в компоненте Button вы можете сделать функцию, как

function getButtonClass() { 
    let classes = this.props.classNames ? this.props.classNames : ''; 

    classes += // whatever additional classes you need to add 

    return classes 
} 

то есть содержащаяся функция, которая может быть столь же сложной и надежны, как вам это нужно, чтобы быть.

Наконец продукт будет

<button className={getButtonClass()} {...otherProps}> {props} </button>