React, Webpack, SASS - sp-* elements not applying classes

I’m having a bit of an trouble getting the sp- elements to work with CSS/SASS in React.
I can tell my CSS/SASS is building properly (bundled by Webpack) as classes work fine on vanilla HTML elements, but no joy with sp- elements.

Here’s an example of rendering a div, sp-body, sp-label, and sp-button each in turn using SASS classes, then CSS classes, and finally with an inline style object : style={{color: 'red', backgroundColor: 'green}}.
Inline styling works, but neither SASS or SCSS does on any sp- element I’ve tried.

I’ve also tried this approach:

// Works
  color: yellow;
  background-color: pink;

// Doesn't work
sp-body.variant {
  color: yellow;
  background-color: pink;

It’s not specifically color I’m really interested in, just CSS in general.
I’ve only ever changed CSS in UXP programmatically by directly targeting element styles - is what I’m experiencing the expected behaviour of sp- elements or am I missing something?

are you sure to correctly target className vs class? What do you have in React and what you see in debugger?

Well, that’s the funny thing, if I use className I get the behaviour detailed above; if I use class then everything works as I would expect, but I was under the impression class was problematic in React due to being a reserved word in JS.
No errors in debugger unless I use class.

For Web Components / Custom HTML elements in React you have to use class instead of className: React DOM Components – React

Has also irritated me.

1 Like

Thanks @tomzag - that’s really infuriating and annoying but I can live with it! :rofl: