CODEWITHSUNDEEP
javascriptcssreactjsjss
Christopher Mellor
Christopher Mellor

Reputation: 444

How can I override classes with JSS

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.

Upvotes: 1

Views: 1498

Answers (2)

Omar Vega
Omar Vega

Reputation: 5

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>

Upvotes: 0

Willem van der Veen
Willem van der Veen

Reputation: 36640

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>

Upvotes: 1

Related Questions