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

Posted 2023-03-07

【中文标题】Rollup 和 Post CSS - 自动为 React className 属性添加前缀

【英文标题】：Rollup and Post CSS - Auto-prefixing React className attributes

【发布时间】：2018-05-29 16:20:41

【问题描述】：

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

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

Post CSS Prefixer

但是，这并没有修改 javascript (JSX)，所以 React 组件仍然使用未命名的类作为 className 属性。

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

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

【参考方案1】：

您不能使用静态类名来使用此功能。要使用它，您需要将样式导入为对象并将其分配为对象。

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

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