How to dynamically change css in React/Sharepoint online

Question

I am developing webpart for Sharepoint in React and I have: div located in X.tsx

<div className={styles.somestyle}><RichText className={styles.richTextStyle} isEditMode=.../></div>

In this div I am using RichText from @pnp/spfx-controls-react. This RichText makes 16px margin when you hit enter while you are typing in it. I tried to get rid of that so I used the code:

.richTextStyle p {
  margin: 0px !important;
}

located in X.module.scss file. Then I created PropertyPaneSlider for changing the values of that margin. Now I am trying to dynamically change the margin with the use of PropertyPaneSlider and I do not know how to change the margin value in scss file. I tried Radium with this example:

<RichText className="styles.richTextStyle"/>
<Style
    scopeSelector=".richTextStyle"
    rules={{
      p: {
        margin: this.props.richTextMargin
      }
    }}/>

Here I am wondering if this scopeSelector is even going to pick up the styles.richTextStyle "from" X.scss file. I've also tried to change style of RichText but that is not possible. Another thing is can I even add !important into Radium Style since the margin doesn't work if I do not use !important property. Is there any other way or can I send this.props.richTextMargin value to X.scss file somehow?

Answer 1

You can't "send" a value into a .scss file. When you build your React web part, the SCSS gets transpiled to regular CSS, and you can't really change those values.

I am not familiar with Radium, but one thing you could do would be to set up several different classes with different margin settings in your .scss file like

.marginZero p {
    margin: 0px;
}

.marginFour p {
    margin: 4px;
}

.marginEight p {
    margin: 8px;
}

and then set up some conditional logic in your component to check the value of this.props.richTextMargin, and then dynamically switch which class you use based on that, like:

let classToUse = styles.marginZero;

if (this.props.richTextMargin >= 4) {
    classToUse = styles.margin4;
} else if (this.props.richTextMargin >= 8) {
    classToUse = styles.margin8;
}

// then in render:
<div className={styles.somestyle}><RichText className={classToUse} isEditMode=.../></div>

Obviously that won't work very well if you want single pixel granulation and a wide range for the margin, because you'll end up with a ton of CSS classes, but if a few specific "levels" of margin are ok, it should work.

The way to get around having to use !important is to make your increase your CSS selectors' specificity. You could do that by doing something as simple as making your CSS:

div.somestyle .marginZero p {
    margin: 0px;
}

div.somestyle .marginFour p {
    margin: 4px;
}

div.somestyle .marginEight p {
    margin: 8px;
}

And if that doesn't work, try introducing ids and using #someId as part of the selector. (Here's more about CSS selector specificity. Also here.)