ReactJS: Two different styles for one component

Question

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

You can put a ternary condition like this: className={ x == 1 ? styles.root : style.otherClassName}. Here x == 1 is your condition. — Arpit Kumar
– Arpit Kumar, Commented Aug 5, 2019 at 12:46
jst give styles from where you are using this component. and set it as a default style, so if you will not get the style from parent component, it will take this styles.root as default. — Ashish Patel
– Ashish Patel, Commented Aug 5, 2019 at 12:46
Do you want to apply another styles together with the one already there? Or is it going to be different style, based on some condition? — Irek
– Irek, Commented Aug 5, 2019 at 12:46
Solution suggested by Arpit is correct, or you can also go for conditional rendering reactjs.org/docs/conditional-rendering.html — Siddhartha Chowdhury
– Siddhartha Chowdhury, Commented Aug 5, 2019 at 12:52

Alireza HI · Accepted Answer · 2019-08-05 12:46:27Z

1

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

answered Aug 5, 2019 at 12:46

Alireza HI

1,9331 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrea - codemillers.com · Accepted Answer · 2019-08-05 14:48:44Z

0

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;

answered Aug 5, 2019 at 14:48

Andrea - codemillers.com

1466 bronze badges

Collectives™ on Stack Overflow

ReactJS: Two different styles for one component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related