ReactJS:Extend，Override CSS类

我想

从CSS文件导入样式类

动态扩展或替代样式

将新样式应用于反应组件

我想要实现的伪代码

import 'common.css'

function MyComponent() {

    if (somethingHappened) {
        style = extendOverrideStyle(styleClassFromCSS)
    } else {
        style = styleClassFromCSS
    }

    return (
        <SomeComponent className=style />
    )
}

导入“common.css”
函数MyComponent（）{
如果（发生了什么事）{
style=extendeverridestyle（styleClassFromCSS）
}否则{
style=styleClassFromCSS
}
返回(
)
}

我该怎么做

更新：

---

在回复中查看我的答案，了解我最终是如何做到这一点的。

只需在CSS文件中创建一个新类来覆盖旧的CSS。 那就照我说的做吧

function MyComponent() {
    return (
        <div className={somethingHappened ? 'firstclass overwriteclass' : 
       'firstclass'}>
        <SomeComponent />
      </div>
    )
}

函数MyComponent（）{
返回(
)
}

您不能直接在组件中设置样式。 首先，需要将样式作为道具传递给组件，并在该组件内设置样式

<SomeComponent prop_class={your_style}/> 

内部组件

<div className={this.props.your_style}>

</div>

答案（实现有点类似于@Rohan的答案）：

main

css类是基本样式规则，而

.main.somethingOccessed

扩展/覆盖了它。

main

css类最初应用于

myComponent

。当

SomethingOccessed

为true时，将两个css类

main somethingOccessed

应用于

myComponent

mystyle.css

.main {
   ...
   margin: 10px;
}

.main.somethingHappened {
   margin: 5px
   padding: 5px;
}

myComponent.js
（使用类名库。检查@Rohan的方法以避免类名库。）

导入“common.css”
从“classnames”导入类名
函数MyComponent（）{
让didItHappen=。。。
返回(
)
}

为什么不添加一个类并基于它更改样式？

import 'common.css'
import classnames from 'classnames'

function MyComponent() {

    let didItHappen = ...

    return (
        <SomeComponent 
           className={classnames('main', {'somethingHappened': didItHappen})} 
        />
    )
}