Can i send parameters from React to SCSS?

Question

I have a title with a before with a number. I want to instead of copying and pasting the same style but changing it's number having only one style in my main stylesheet and sending a different parameter from my JSX to the scss.

Here is the 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
    }
}

I want to change the --text in numbered-heading:before.

Using Passing values from HTML to SCSS this answer like this: <h2 className="numbered-heading" style="--text: 01.;"> doesn't work, i get a 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. But that was expected because that isn't the jsx syntax.

But using {{}} as i should like this: <h2 className="numbered-heading" style={{"--text: 0.1;"}}> says that : is expected.

And doing <h2 className="numbered-heading" style={{ "--text": "0.1;" }}> doesn't display the number, it ends up like this:

Instead of this:

Edit: as @ray hatfield pointed out. With the last approach: <h2 className="numbered-heading" style={{ "--text": "0.1;" }}> the rendered html looks like this:

Lacking the before and style.

What does the rendered markup look like on your last example? I would expect it to be <h2 class="numbered-heading" style="--text: '0.1;'">some cool title</h2>, and I would expect that to work. — ray
– ray, Commented Feb 18, 2022 at 17:16
@rayhatfield in the rendered it only says <h2 class="numbered-heading"> Some cool title </h2> but the style doesn't appear and also the before doesn't appear. — Mat
– Mat, Commented Feb 18, 2022 at 17:23

ray · Accepted Answer · 2022-02-18 18:10:16Z

1

Note: If you're just trying to prepend a number you should consider using a CSS Counter.

Keep your last example but wrap the value in additional quotes.

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

The additional quotes are needed because you want the output to be a quoted string, not a keyword:

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

See this codesandbox for a working example.

edited Feb 18, 2022 at 18:10

answered Feb 18, 2022 at 17:46

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can i send parameters from React to SCSS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related