html - docusaurus: styles.module.css で ifm-color-primary を使用する方法

Question

Docusaurus の足場は、custom.css

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

および の次の内容styles.module.css:

.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.featuresAlt以下のように定義したい。

.featuresAlt {
  background-color: lightest;
}

そして、それを使用しindex.jsます。何かのようなもの：

{features && features.length > 0 && (
  <section className={classnames(styles.features, styles.featuresAlt)}>
    <div className="container">
      <div className="row">
        {features.map((props, idx) => (
          <Feature key={idx} {...props} />
        ))}
      </div>
    </div>
  </section>
)}

私の質問は次のとおりです。

• 異なるセクション (例:featuresとproducts) を異なる背景色で分離しようとしています。独自のスタイルを定義する必要がありますか?

• 上記の定義featuresAltは、lightest背景がないため正しくありません。どうすれば修正できますか？

• スタイルの色を で定義することをお勧めしますstyles.module.cssか、それとも別の場所で定義する必要がありますか?

( Docusaurus のドキュメントのスタイリング ページを調べましたが、必要な情報が見つかりませんでした。)

Answer 1

これを試して：

background-color: var(--ifm-color-primary-lightest)