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

【问题标题】：ReactJS: Two different styles for one componentReactJS：一个组件有两种不同的样式
【发布时间】：2019-08-05 22:48:44
【问题描述】：

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

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？

提前致谢

【问题讨论】：

你可以像这样放置一个三元条件：className={ x == 1 ? styles.root : style.otherClassName}。这里x == 1 是你的条件。
jst 从您使用此组件的位置给出样式。并将其设置为默认样式，因此如果您不会从父组件中获取样式，它将将此styles.root 作为默认样式。
您想将其他样式与已有样式一起应用吗？还是会根据某些条件而采用不同的风格？
Arpit建议的解决方案是正确的，或者你也可以去条件渲染reactjs.org/docs/conditional-rendering.html
该死，我读的是“an other”而不是“another”

标签： javascript reactjs

【解决方案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/>;

【讨论】：

【解决方案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;

【讨论】：