Объединение CSS-классов в CSS-модулях в React - PullRequest
Новая
       27

Объединение CSS-классов в CSS-модулях в React

0 голосов
/ 18 декабря 2018

Я использую иконки Fontawesome в своей реакции и использую модули CSS в реакции.Теперь я хочу использовать этот значок, поэтому я использую следующий синтаксис: <i className={styles['fa-user-circle']} ></i> Я не могу использовать обычный синтаксис styles.someClassName из-за дефисов в названии fontawesome иконок, а также мне нужно объединить fas и fa-user-circle classNames.Как мне это сделать?

Спасибо.

1 Ответ

0 голосов
/ 18 декабря 2018

Вы можете использовать версию FontAwesome React здесь

Реализация выглядит как 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons'

, а ваш компонент рендеринга выглядит как 

 export default (props) => {
  return (
    <div>
      <FontAwesomeIcon icon={faPlus} className="pointer" onClick={props.onAdd} id={props.id} />
    </div>
 )
}

Как вы можете видеть, className мы можем дать такому, какой дополнительный CSS вы хотите дать.

...