如何使用JSS覆盖类

Question

我的组件库中有一些现成的组件，这些组件将要求我进行一些替代。我试图避免使用传统的CSS或SASS，但是我不确定如何在 JSS 中进行类重写。

Answer 1

我只添加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>

Answer 2

这是一个基本的实现。我首先查找DOM元素，然后更改它的className属性。但是，有多种方法可以实现这一目标，而且没有一个比另一个要好。

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>