0

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 文档的样式页面，但找不到我需要的信息。）

4

2 回答 2

1

试试这个：

background-color: var(--ifm-color-primary-lightest)
于 2020-05-25T09:12:18.210 回答
1

您可以完全按照在普通 CSS 中使用它的方式使用它：

.featuresAlt {
  background-color: var(--ifm-color-primary-lightest);
}
于 2020-05-25T17:18:09.320 回答