3

使用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; }
}

我见过各种导入.clearfixCSS 模块的方法，但在每种情况下，样式声明都会为应用类的每次出现重新定义。这是一个例子：

/* widget.scss */

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

1 回答 1

1

通过反复试验，我发现您可以:global在使用实用程序类的选择器中声明（而不是定义它的位置）：

.widget {

  // other styles

  :global {
    composes: clearfix;
  }
}

为了避免混乱和重复import的from语句，我使用了一个index.scss文件来导入实用程序文件，然后将其导入到需要实用程序类的任何部分。

于 2015-12-09T06:51:41.233 回答