Блог

Главная - Вопросы по программированию - Получите oneOf-prop для изменения имени класса, модулей CSS

Получите oneOf-prop для изменения имени класса, модулей CSS

#javascript #reactjs #react-proptypes #css-modules

Вопрос:

Это имя класса принимает значение oneOf-prop, равное классу (пример: «основной»). Я пытаюсь понять, как отформатировать это имя класса, чтобы оно работало с модулями CSS.

Приведенный ниже код отображает имя класса как styles.primary, если мы передадим его как prop. Но мы не будем обрабатывать это с помощью css-модулей. Смотрите это изображение отображаемых имен классов

 import styles from '../../styles/components/buttons/Cta.module.css'; 
   
export const CTA = ({ fit, type, ...props }) => {
    const mode = fit ? styles.fit : styles.fill;
    return (
      <button
        type="button"
        className={[styles.cta, `styles.${type}`, mode].join(' ')}
        {...props}
      >
      </button>
    );
  };
  CTA.propTypes = {
    fit: PropTypes.bool,
    type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'disabled']),
};

Есть какие-нибудь идеи?

Ответ №1:

Вот как я это делаю:

  <li className={`${css.notification} ${css.important}`}>

Комментарии:

1. Да, вы можете использовать обратные ссылки вместо использования массива. Основная проблема заключается в форматировании имени класса, чтобы мы могли получить реквизит. если мы напишем ${styles.type}, он будет отображаться неопределенным.

Метки: ,