如何使一个组件在 React 中从其他相同组件中脱颖而出

Question

我正在创建React项目，我有在项目中多个地方使用的组件。问题是，在 css 样式方面，如何使一个实例与该组件的其他实例有所不同？

Answer 1

为了实现这一点，您必须接受组件的样式作为道具。每次使用该组件时，都将所需的样式传递给每个实例。

例如

const PopupHeader = ({ title, onClose, classes }) => (
<div className={classNames(styles.head, classes.header)}>
<span className={styles.headText}>
{title}
</span>
</div>
);

在这里，PopupHeader组件接收类作为 prop，它实际上是从父组件传递的样式对象，用于子组件。

希望对您有所帮助。

Answer 2

您可以使用contextAPI发送所有组件中的样式

<ParentComponent>
<Style.Provider value={{ style: "background: "white .. or something" }}>
{this.props.children}
</Style.Provider>
</ParentComponent>

您可以在所有子组件中发送样式