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

Question

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

从“./componentA.module.scss”导入样式；

componentA.module.scss:

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

ComponentA.js

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

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

ComponentB.js

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

但我想在组件 B 中将颜色覆盖为 class.A。我在 componentB.module.scss 中尝试这样做，但没有改变。

componentB.module.scss

.A {
 color: red !important;
}

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

Answer 1

您必须通过 props 传递组件 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"}} />
)

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

Overwrite styles of a component inside another in react