ReactJS：一个组件有两种不同的样式

Question

我有一个在同一代码中使用两次的组件，它看起来像这样：

import React from 'react';
import Container from 'Base/Grid/Container';
import styles from './index.css';

const Columns = props => <Container {...props} className={styles.root} block/>;
export default Columns;

导入时，如何将另一个样式类应用于第二个使用的Columns ？

提前致谢

Answer 1

您可以在styles.root之外定义从道具传递的另一种样式。 如下所示：

const Columns = props => <Container {...props} className={[styles.root,props.newStyles]} block/>;

因此，当您创建Columns组件时，可以传递特定的样式。 例如：

<Columns newStyles={{color: 'red'}} />

因此，您可以为使用的每个组件自定义样式。

或者，如果您不想使用root style ，则可以使其成为条件，如果传递了newStyle则使用它。 如果不是，则仅使用styles.root 。 代码如下：

Columns = props => <Container {...props} className={props.newStyle || styles.root} block/>;

Answer 2

干净的解决方案是使用反应组合物。 在一个文件中声明“基本”组件，然后在两个不同文件中以两个不同的名称导出样式之一。

// BaseComponent.jsx
export default Column = () => <div>Column</div>;

// RedColumn.jsx
import Column from './Column';

const RedColumn = () => <Column style={{color: "red"}} />;

export default RedColumn;

// BlueColumn.jsx
import Column from './Column';

const BlueColumn = () => <Column style={{color: "blue"}} />;

export default BlueColumn;