0

私が取り組んでいるプロジェクトでは、css モジュールをpostcss(またpostcss-cssnextとpostcss-include) と共に使用します。グローバルに提供される依存関係としてブートストラップもあります。

特定のコンポーネントには、ボタンのカスタム クラスがあります。したがって、私のボタンには次のクラスがありますbtn btn-custom。

要件に従って、ボタンがアクティブな状態のときにボタンの外観を変更したいと考えています。そのため、ブートストラップには次のセレクターがあります: .btn.active, .btn:active. 疑似クラスの上書きは簡単です。ただし、.activeクラスは難しいところです。

私のcssファイルで、これを処理する方法をいくつか試しましたが、うまくいかないようです。ここに私が試したことのいくつかがあります：

.btn-custom {
  &.active, &:active {}
  @nested :global &.active, &:active {}
  @nested :global & { &.active, &:active: {} }
  @nested :global { &.active, &:active: {} }
}

:global {
  .btn-custom { &.active, &:active {} }
  .btn { &.active, &:active {} }
}

これをどのように達成できるかについて誰か考えがありますか?

4

1 に答える 1

1

グローバル ターゲット クラスは、次のように括弧で囲む必要があります。

.btn-custom {
  color: red;
}

.btn-custom:global(.active) {
  color: blue;
}

したがって、ネスティングの場合:

.btn-custom {
  &:global(.active), 
  &:active {}
}

最後のものはテストされていません。ここでは PostCSS プラグインの順序が重要だと思います。

于 2016-10-15T08:10:04.380 に答える