汇总和后置CSS -自动添加前缀的React className属性

Question

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

我已经添加了这个插件来自动添加‘前缀-’到CSS中的每个类名：

Post CSS Prefixer

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

有没有办法使用汇总来自动修改className属性，使其包含在CSS中指定的相同前缀？

请注意，我不是在寻找一个完全模块化的解决方案，比如CSS模块，因为我希望库中的每个组件都有相同的“前缀”。

Answer 1

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

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

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