javascript - 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

除了从 props 传递的 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/>;