我可以将参数从 React 发送到 SCSS 吗？

Question

我有一个标题，前面有一个数字。我不想复制和粘贴相同的样式，而是更改它在我的主样式表中只有一种样式的编号，并将不同的参数从我的 JSX 发送到 scss。

这是 scss:

.numbered-heading {
    display: flex;
    align-items: center;
    position: relative;
    margin: 10px 0 30px;
    width: 100%;
    font-size: clamp(26px, 5vw, 13px);
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    line-height: 1.1;
    color: #66CCFF;
}

.numbered-heading:before {
    position: relative;
    content: var(--text);
    margin-right: 10px;
    color: rgb(114, 70, 184);
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(16px, 3vw, 20px);
    font-weight: 400;
}

@media (max-width: 480px) {
    .numbered-heading:before {
        margin-bottom: -3px;
        margin-right: 5px;
    }
}

.numbered-heading:after {
    content: '';
    display: block;
    position: relative;
    width: 240px;
    height: 1px;
    margin-left: 20px;
    background-color: #233554;
}

@media (max-width: 1080px) {
    .numbered-heading::after {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .numbered-heading::after {
        width: 52%;
    }

    .numbered-heading {
        margin: 10px 0px 40px;
        font-size: clamp(26px, 5vw, 32px);
    }

    .numbered-heading::before {
        position: relative;
        margin-left: 33px;
        font-size: clamp(16px, 3vw, 20px);
        font-weight: 400;
    }
}

@media (max-width: 600px) {
    .numbered-heading::after {
        margin-left: 10px
    }
}

我想更改 numbered-heading:before.

中的 --text

使用这样的答案：<h2 className="numbered-heading" style="--text: 01.;"> 不起作用，我得到 Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. 但这是预期的，因为那不是 jsx 语法。

但我应该这样使用 {{}}：<h2 className="numbered-heading" style={{"--text: 0.1;"}}> 说：是预期的。

并且做<h2 className="numbered-heading" style={{ "--text": "0.1;" }}>不显示数字，结果是这样的：

而不是这个：

编辑：正如@ray hatfield 指出的那样。使用最后一种方法：<h2 className="numbered-heading" style={{ "--text": "0.1;" }}> 呈现的 html 看起来像这样：

缺乏之前和风格。

Answer 1

注意：如果您只是想在前面加上一个数字，您应该考虑使用 CSS Counter.

保留上一个示例，但将值用额外的引号引起来。

<h2 className="numbered-heading" style={{ "--text": "'0.1'" }}>

需要额外的引号，因为您希望输出是带引号的字符串，而不是关键字：

  --text: 'foo'; /* you want this */
  --text: foo; /* not this */

有关工作示例，请参阅 this codesandbox。

我可以将参数从 React 发送到 SCSS 吗？

Can i send parameters from React to SCSS?

html

sass

reactjs