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 (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?

Amos · Accepted Answer · 2020-10-16 09:14:13Z

0

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.

answered Oct 16, 2020 at 9:14

Amos

2,0911 gold badge8 silver badges9 bronze badges

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

1 Comment

Robert J. Over a year ago

Yes this is a feasible option, however in my case users have very long rich texts (combination of various styles and elements) thus post processing would be quite painful...yet I agree that this would definitely work :) Thank you for your answer

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related