Rollup和Post CSS - 自动添加前缀React className属性

Question

我使用Rollup + React + Post CSS构建组件库。我正在寻找一种自动修复类名的方法，这样它们就不会与使用该库的项目中的样式冲突。

我已添加此插件以自动添加＆＃39;前缀 - ＆＃39;到CSS中的每个类名：

Post CSS Prefixer

但是，这不会修改JavaScript（JSX），因此React组件仍然使用未命名的类作为className属性。

有没有办法使用Rollup自动修改className属性以包含CSS中指定的相同前缀？

请注意，我并不是在寻找完全模块化的解决方案，例如CSS模块，因为我想要相同的前缀 - ＆＃39;跨库中的每个组件。

Answer 1

您不能使用静态classNames来使用此功能。要使用它，您需要导入样式作为对象并将其指定为对象。

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

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