CODEWITHSUNDEEP
javascriptreactjs
A.Burdonskaya
A.Burdonskaya

Reputation: 561

ReactJS: Two different styles for one component

I have a component that I use twice in the same code, it looks like this:

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;

How can i, when importing, apply another style class to the second used Columns?

thanks in advance

Upvotes: 1

Views: 1820

Answers (2)

Andrea - codemillers.com
Andrea - codemillers.com

Reputation: 146

A clean solution is to use react composition. Declare the "base" component in one file, and then export in two different files with two different names the styled one.

// 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;

Upvotes: 0

Alireza HI
Alireza HI

Reputation: 1933

You can define another style beside of your styles.root that is passed from the props. Like below:

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

So when you make a Columns component you can pass the specific styles. For example:

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

So you can customize the style for each component which you use.

or if you don't want to use the root style you can make it conditional that if there the newStyle was passed use it. If not just use the styles.root. And the code would be like this:

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

Upvotes: 1

Related Questions