reactjs - 具有 PostCSS/CSS 模块的全局实用程序类

Question

使用 CSS Modules , 如何在不复制样式声明的情况下将全局实用程序类应用于多个元素？

例如，这是一个没有 CSS 模块的 React 组件。相关行是包含两个类的 div:widget 和 clearfix...

/* components/widget.jsx */

class Widget extends Component {
  render() {
    return (
      <div className="widget clearfix">
        <div className="widget-alpha">Alpha</div>
        <div className="widget-beta">Beta</div>
      </div>
    );
  }
}

.clearfix 是一个全局实用程序类，我想将其应用于整个应用程序中的许多元素:

/* util/clearfix.scss */

.clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

我见过将 .clearfix 导入 CSS 模块的各种方法，但在每种情况下，都会为每次应用该类的事件重新定义样式声明。这是一个示例:

/* widget.scss */

.widget {
  // other styles
  composes: clearfix from '../util/clearfix.scss';
}

Answer 1

通过反复试验，我发现您可以在使用实用程序类的选择器中声明 :global(而不是定义它的地方):

.widget {

  // other styles

  :global {
    composes: clearfix;
  }
}

为了避免困惑和重复的 import 和 from 语句，我使用了一个 index.scss 文件来导入实用程序文件，然后导入它在任何需要实用程序类的地方。