Dynamically update scss class attribute by using variable in typescript React Application

Question

I'm writing a react app where I use an scss stylesheet. In this I set width = 240px;, and this is then used in my component. I would like to dynamically update the scss.styles.ActiveWide width attribute depending on how many elements there are in an array:

//.. In function

var betweenTimeIndexes = [];
   for (var i = fromTimeIndex; i <= toTimeIndex; i++) {
     betweenTimeIndexes.push(i);
}
const myCSS = `${(betweenTimeIndexes.length*200)}` // I want my width to be equal to this, and the children of ActiveWide needs to inherit this width.
return(
    <div className={styles.ActiveWide} defaultValue={fromTimeIndex}>

                <div className={styles.ActiveWideTimeSpan}>
                    <div className={styles.ActiveWideFromText}>{fromText}</div>
                    <div className={styles.ActiveWideDash}></div>
                    <div className={styles.ActiveWideToText}>{toText}</div>
                </div>
    </div>
);

My scss class:


.ActiveWide{
    /* State=Active, wide=true,NoOfSlots=? */
    box-sizing: border-box;

    /* Auto layout */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;

    width: 240px; // This I want dynamically update
    height: 96px;
    left: 156px;
    top: 136px;

    

    background: rgba(62, 177, 200, 0.5);
    border-bottom: 2px solid #C4D600;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

I don't know if this approach is correct/possible as when we bundle the application the scss files are converted into static css. If not, how would I do to achieve this?

You might want to use css variables which can be updated with js. — Matthieu Riegler
– Matthieu Riegler, Commented Jul 6, 2022 at 12:21

kachi_dk · Accepted Answer · 2022-07-06 12:24:55Z

1

Use inline styling for that.

<div style={{width: 10*betweenTimeIndexes.length + "px" }}>
  ...
</div>

answered Jul 6, 2022 at 12:24

kachi_dk

4134 silver badges8 bronze badges

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

2 Comments

OLGJ Over a year ago

Will this "overwrite" the width attribute of the .ActiveWide class so that the children of that div also inherits it?

kachi_dk Over a year ago

Yes It would, inline styles have higher specificity

Collectives™ on Stack Overflow

Dynamically update scss class attribute by using variable in typescript React Application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related