Search code examples
cssreactjssharepoint-onlinespfxsharepointframework

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

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:

enter image description here

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 (e.g. 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?

Solution

  • 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: enter image description here Or you could try to ask for further help in pnp control github.