SharePoint Framework currently takes my .scss files and changes all class names by adding IDs like this: floatRight_789b4d6f
. I understand this is done to isolate the styling within the web part but it messes up styling where I don't control the CSS.
Let's say I'm using an external JavaScript library that generates HTML as well as specific CSS class names (I don't control these). I need to style these elements and therefor cannot use the "mangled" class names the SharePoint Framework gives me. I need to use exactly the class names as they are generated by the external library (so floatRight
for the above sample).
Sample
HTML generated by external library:
<div class="floatRight">...</div>
Good. I need to style the floatRight
class.
This is in my scss file:
.floatRight {
float: right;
margin-left: 10px;
}
But this is generated in the scss.ts file:
const styles = {
floatRight: 'floatRight_789b4d6f'
};
And my style is not applied to the element.
Question
How to get rid of the IDs? How can I disable this class name rewriting for certain .scss files? Or is there an alternative approach that is recommended here?