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

**URL:** <https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909>\
**Category:** UXP Plugin API\
**Tags:** react, javascript, css, sass, scss\
**Created:** [October 2, 2023, 1:35pm UTC](https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909 "2023-10-02T13:35:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [October 2, 2023, 1:35pm UTC](https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909/1 "2023-10-02T13:35:41Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/6/62137f2037bf76d69f622500a0fffb32f55c33ac.png)

I’ve also tried this approach:

```auto
// 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?

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [October 2, 2023, 1:51pm UTC](https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909/2 "2023-10-02T13:51:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [October 2, 2023, 1:55pm UTC](https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909/3 "2023-10-02T13:55:00Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![tomzag](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tomzag/32/2464_2.png) [@tomzag](https://forums.creativeclouddeveloper.com/u/tomzag)\
**Post date:** [October 2, 2023, 2:28pm UTC](https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909/4 "2023-10-02T14:28:08Z")

</div>

For Web Components / Custom HTML elements in React you have to use `class` instead of `className`: [React DOM Components – React](https://react.dev/reference/react-dom/components#custom-html-elements)

Has also irritated me.

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [October 2, 2023, 2:41pm UTC](https://forums.creativeclouddeveloper.com/t/react-webpack-sass-sp-elements-not-applying-classes/6909/5 "2023-10-02T14:41:32Z")

</div>

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