0

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:

enter image description here

Instead of this:

enter image description here

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

enter image description here

Lacking the before and style.

Mat
  • 119
  • 1
  • 11
  • What does the rendered markup look like on your last example? I would expect it to be `

    some cool title

    `, and I would expect that to work.     – ray Feb 18 '22 at 17:16
  • @rayhatfield in the rendered it only says `

    Some cool title

    ` but the style doesn't appear and also the before doesn't appear.     – Mat Feb 18 '22 at 17:23

1 Answers1

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.

ray
  • 26,557
  • 5
  • 28
  • 27