如何使用 JSS 覆盖类答案

【问题标题】：How can I override classes with JSS如何使用 JSS 覆盖类
【发布时间】：2019-01-02 13:37:42
【问题描述】：

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

【问题讨论】：

How to override the properties of a CSS class using another CSS class的可能重复
这不是重复的。我试图在 JSS 中做到这一点，而不是 CSS
你能详细说明一下吗？你在某个地方有演示吗？
当然，我的意思是......就像这样简单......这是我的代码编译成的......<div class="MuiListItemText-root-262 />我希望能够像这样定位特定项目const styles = () => { MultiListItemText-root-262: { color: red; } }
你做到了吗？ @ChristopherMellor，我觉得你的问题被误解了

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：