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)

Answer 2

你可以像在普通的CSS中一样使用它。

.featuresAlt {
  background-color: var(--ifm-color-primary-lightest);
}