If you had override the CSS using Content editor web part on Classic experience then you would have faced big problem in SPFx.
Yes, you cannot override the CSS design because CSS preprocessor adds some random characters at the end dynamically. So you cannot override.
You might think why do I need to provide design customization for users in SPFx.
Here is my requirement:
I want to build a web part that displays restricted port numbers in table format. It will have regular table structure with header and body. Something like below.
Site owners can add this web part on their team site if they want. They might have different color themes applied. If they want to change the header's background to red then we cannot go and develop a web part for their team site. Instead we can provide a multi line text box on property pane and allow users to add their design customization. (Note: You will have to add )
Earlier it was like this;
Hope you find it useful.
Happy coding !!!!!
Yes, you cannot override the CSS design because CSS preprocessor adds some random characters at the end dynamically. So you cannot override.
Here is my requirement:
I want to build a web part that displays restricted port numbers in table format. It will have regular table structure with header and body. Something like below.
| Restricted Ports |
|---|
| 80 |
| 12345 |
Believe me, my users are very technical and they know how to play with CSS designs.
Here's how to add multiple class names;
<div className={[styles.panelStyle,'customclass'].join(' ')}>
Earlier it was like this;
<div className={styles.panelStyle}>
Hope you find it useful.
Happy coding !!!!!
