3

CSS Modulesを使用して、スタイル宣言を複製せずにグローバル ユーティリティ クラスを複数の要素に適用するにはどうすればよいですか?

たとえば、これは CSS モジュールのない React コンポーネントです。関連する行は、次のdiv2 つのクラスを持つ です: widgetand 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; }
}

CSS モジュールにインポートするさまざまな方法を見てきまし.clearfixたが、いずれの場合も、クラスが適用されるたびにスタイル宣言が再定義されます。一例を次に示します。

/* widget.scss */

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

1 に答える 1

1

試行錯誤の結果:global、ユーティリティクラスが使用されているセレクターで宣言できることがわかりました（定義されている場所ではありません）。

.widget {

  // other styles

  :global {
    composes: clearfix;
  }
}

import煩雑で反復的なandfromステートメントを避けるために、ファイルを使用index.scssしてユーティリティ ファイルをインポートし、それをユーティリティ クラスが必要なパーシャルにインポートしました。

于 2015-12-09T06:51:41.233 に答える