Question

我想

从CSS文件导入样式类
动态扩展或覆盖样式
应用新样式来响应组件。

我想要实现的伪代码

import 'common.css'

function MyComponent() {

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

    return (
        <SomeComponent className=style />
    )
}

我该怎么做？

更新：在答复中查看我的回答，以了解我最终是如何做到的。

Answer 1

只需在CSS文件中创建一个新类来覆盖旧CSS。然后按照

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

Answer 2

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

<SomeComponent prop_class={your_style}/>

在SomeComponent内部

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

</div>

Answer 3

答案（实现方式与@Rohan的回答有点类似）：

main CSS类是基本样式规则，.main.somethingHappened对其进行扩展/覆盖。 main CSS类最初应用于myComponent。当somethingHappened为true时，将两个CSS类main somethingHappened应用于myComponent。

mystyle.css

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

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

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

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

function MyComponent() {

    let didItHappen = ...

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

ReactJS：扩展，覆盖CSS类

3 个答案: