时间戳

首页 > 解决方案 > 在反应中覆盖另一个组件的样式

reactjs - 在反应中覆盖另一个组件的样式

问题描述

我有一个具有自己样式的组件：

从 './componentA.module.scss' 导入样式；

组件A.module.scss：

.A { color: green;
     background: white;
     font-size: 1rem;}

组件A.js

....
return(
   <div className={styles.A}>{props.children}</div>
)

我有一个 ComponentB.js。在这个组件中，BI 需要组件 A，但我需要覆盖样式颜色。

组件B.js

...
import ComponentA from './../componentA';
import styles from 'componentB.module.scss';
...
return(
<ComponentA />
)

但我想在组件 B 中将颜色覆盖到类 .A。我尝试在 componentB.module.scss 中做到这一点并且它没有改变。

组件B.module.scss

.A {
 color: red !important;
}

它不起作用我希望能够根据包装的组件覆盖样式。我该怎么做？谢谢。

标签： reactjsreact-css-modules

解决方案

您必须通过道具传递组件 A 样式，然后应用到包装器 div

const ComponentA = (props) => {

  return(
    <div className={styles.A} styles={props.cssStyles}>{props.children}</div>
    )
  }

接着

import ComponentA from './../componentA';
import styles from 'componentB.module.scss';
...
return(
<ComponentA cssStyles={{color: "red"}} />
)

您还可以将类名作为道具传递，然后通过此包https://www.npmjs.com/package/classnames合并默认类名和道具类名

推荐阅读