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;