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

Photoshop UXP Plugin API
, , , ,
1

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.

Screenshot 2023-10-02 135621
Screenshot 2023-10-02 135621797×697 8.09 KB

I’ve also tried this approach:

// Works
sp-body{
  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?

2

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

3

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.

4

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
5

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