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 中为样式定义颜色，还是应该在其他地方定义它们？

（我查看了 styling page of Docusaurus documentation，但找不到我需要的信息。）

Answer 1

试试这个：

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

Answer 2

您可以完全按照正常使用方式使用它 CSS:

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

docusaurus：如何在 styles.module.css 中使用 ifm-color-primary

docusaurus: how to use ifm-color-primary in styles.module.css

html

css

styling

docusaurus