How can I override classes with JSS

Question

My component library has some out-of-the-box components that are going to require me to do some overrides. I am trying to avoid using traditional CSS or SASS, but i'm not sure how you can do class overrides in JSS.

Possible duplicate of [How to override the properties of a CSS class using another CSS class](https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class) — Hodrobond, Jul 25 '18 at 16:50
This is not a duplicate. I am trying to do this in JSS, not CSS — Christopher Mellor, Jul 25 '18 at 16:51
Sure, I mean...Just something simple like this... Here's what my code compiles to.. ` — Christopher Mellor, Jul 26 '18 at 13:53
did you manage to achieve this? @ChristopherMellor, I get the impression that your question was missunderstood — Carlos Valencia, Jan 22 '19 at 22:07

score 1 · Answer 1 · answered Jul 25 '18 at 16:53

Here is a basic implementation. I first look up the DOM element and then change the className property of it. However, there are multiple ways of achieving this and not one is necesarrily better than another.

function change () {
  
let el = document.getElementsByClassName('bar');

el[0].className = "foo";
}

.bar {
    background-color: red;
    flex-wrap: wrap;
}

.foo {
  background-color: green;
}

<div class="bar">
aefreawafeawef
</div>
 <button onclick="change()">change class</button>

score 0 · Answer 2 · answered Jul 25 '18 at 17:02

I only add the classList.

function change () {
  
let el = document.getElementsByClassName('bar');

el[0].classList.add("foo");
}

.bar {
    background-color: red;
    flex-wrap: wrap;
}

.foo {
  background-color: green;
}

<div class="bar">
aefreawafeawef
</div>
 <button onclick="change()">change class</button>

How can I override classes with JSS

2 Answers2