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

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?

CodePudding user response：

Use inline styling for that.

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