首页 文章

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

提问于
浏览
1

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

我已经添加了这个插件来自动将'前缀'添加到CSS中的每个类名:

Post CSS Prefixer

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

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

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

1 回答

  • 1

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

    import React from "react";
    import style from "style.css";
    
    class DivMyStyle extends React.Component {
      render() {
        return <div className={style.myStyle} />
      }
    }
    

相关问题