React (SPFx - Sharepoint Framework): Control order of imported css classes

Question

In my React solution I am using a custom component called RichText . The problem with this component is, that one of the styles for h2 element has different font-weight as I would need to. I am trying to override default style of this custom component, but due to the fact that this property is set as !important I am unable to do so (as order of custom component style takes precedense over my import). Please refer to image below:

I have tried the following things to make sure, my CSS class will be loaded later (which should place it hierarchically above the css of custom component):

• Change order of imports at the top of my component (tried to make it first, tried to make it last; nothing worked)
• tried to use lifecycle events (componentDidMount) and dynamically import css then
• tried to load css with timer (eg wait 2 seconds and then import() class)
• used :global identifier in my scss class

Yet nothing has changed the order of this class. Am I missing something or what do I need to do in order to make sure it will be loaded as expected?

Answer 1

As I test,if we want to change the text in onChange property,the control will not change the style.
As a workaround,you could try to change the default Bold function font-weight.

Test code:

    .richtext strong{
        font-weight: 300!important;
      }

<RichText className={styles.richtext}
          onChange={(text)=>this.onChange(text)}
/>
private onChange = (newText: string) => {
    
  return newText;
}

Test result: Or you could try to ask for further help in pnp control github .