Rollup и Post CSS - автоматическое добавление префиксов к атрибутам React className

Я использую Rollup + React + Post CSS для создания библиотеки компонентов. Я ищу способ автопрефикса имен классов, чтобы они не конфликтовали со стилями в проекте, использующем библиотеку.

Я уже добавил этот плагин, чтобы автоматизировать добавление префикса- к каждому имени класса в CSS:

CSS-префиксатор публикации

Однако это не изменяет JavaScript (JSX), поэтому компоненты React по-прежнему используют безымянные классы в качестве атрибутов className.

Есть ли способ использовать Rollup для автоматического изменения атрибутов className для включения того же префикса, который указан в CSS?

Обратите внимание, что я не ищу полностью модульное решение, такое как модули CSS, так как мне нужен один и тот же префикс- для каждого компонента внутри библиотеки.


reactjs jsx postcss rollup
person MarkLunney    schedule 15.12.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы не можете использовать static classNames для использования этой функции. Чтобы использовать его, вам нужно импортировать стиль как объект и также назначить его как объект.

import React from "react";
import style from "style.css";

class DivMyStyle extends React.Component {
  render() {
    return <div className={style.myStyle} />
  }
}
person Alexander C.    schedule 29.04.2018