javascript - 如何使用 JSS 覆盖类

Question

我的组件库有一些开箱即用的组件，需要我进行一些覆盖。我试图避免使用传统的 CSS 或 SASS，但我不确定如何在JSS中进行类覆盖。

Answer 1

这是一个基本的实现。我首先查找 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>

Answer 2

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