css modules и использование props для кастомизации компонента

Question

Я создал компонент кнопка, в одном месте мне нужна красная кнопка, в другом серая.

Стили хранятся в css модуле.

styles.button это класс в котором прописаны общие стили для всех кнопок, в styles.buttonClass я пытаюсь передать нужный класс для кастомизации кнопки, но так это не работает, потому что buttonClass воспринимается как имя класса в модуле.

Как правильно сделать, чтобы нужный стиль подключился из css модуля ?

import styles from './Button.module.scss'

const Button = ({ children, buttonClass }) => {
  return (
    <button className={`${styles.button} ${styles.buttonClass}`}>
      {children}
    </button>
  )
}

Использую компонент

<Button buttonClass="grayButton"> Серая кнопка </Button>
<Button buttonClass="redButton"> Красная кнопка </Button>

Answer 1

Вообще, это должно работать так:

const Button = ({ children, buttonClass }) => {
    return (
        <button className={buttonClass}>
            {children}
        </button>
    )
}

Где buttonClass это имя класса, которое будет создано после компиляции вашего scss файла в css.

Если в buttonClass передавать имя из './Button.module.scss'

<Button buttonClass="grayButton"> Серая кнопка </Button>

то должно выглядеть как то так

import styles from './Button.module.scss'

const Button = ({ children, buttonClass }) => {
    return (
        <button className={styles[buttonClass]}>
            {children}
        </button>
    )
}

Answer 2

Вы можете использовать библиотеку classnames

import cn from 'classnames';
Import cl from './Button.module.css';

cons Button = ( {className, children} ) => {
return (
      <button className={cn(cl.button, className)}>
           {chilren}
      </button>)}

БЛОГ НА HUSL

css modules и использование props для кастомизации компонента

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