How can I add multiple className's to react component?

Question

I need to add one className to a component which is being passed down from the parent, and another className that doesn't have anything to do with its parent, but with the component itself.

example

<div className={this.state.className} className={this.props.content.divClassName}>
      <div className={this.props.content.containerClassName}>
      <div className="row">
      <div className="col-sm-6 col-sm-offset-6">
        <p>{this.props.content.subTitle}</p>
        <h1 className={this.props.content.titleClassName}>{this.props.content.headerText}</h1>
        <p className={this.props.content.subTitleClassName}>{this.props.content.paragraph}</p>
        <p>{this.props.content.quote}</p>
        <Button showMe={this.props.content.showButton} buttonText={this.props.content.buttonText} />
      </div>
      </div>
      </div>
    </div>

When I try this, neither class is applied, I can do one or the other or not both. How do I achieve this?

JMM · Accepted Answer · 2016-04-21 14:21:48Z

89

<div className={`${this.state.className} ${this.props.content.divClassName}`}>

Or if you can't use template strings:

<div className={[this.state.className, this.props.content.divClassName].join(" ")}>

edited Apr 21, 2016 at 14:21

answered Apr 21, 2016 at 14:20

JMM

26.9k3 gold badges53 silver badges56 bronze badges

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

2 Comments

James Donnelly Over a year ago

Is this preferred over simple concatenation? {this.state.className + " " + this.props.content.divClassName}

JMM Over a year ago

@James Depends who you ask. Personally I'd probably just do the [].join() way that I just added, but I'd probably prefer the template string version to concatenation.

Muhammad Muzamil · Accepted Answer · 2021-10-13 13:30:34Z

10

Using template literals (Template strings),

Combo of string and props class is here

className={`${props.myClass} MyStringClass`}

edited Oct 13, 2021 at 13:30

answered May 5, 2020 at 8:02

Muhammad Muzamil

1,3522 gold badges21 silver badges27 bronze badges

Comments

T04435 · Accepted Answer · 2021-07-19 20:56:36Z

0

I use classnames like this:

# terminal - install
$ yarn add classnames

// React component
import classnames from 'classnames';

<Component classNames={classnames(class1, class2)} />

edited Jul 19, 2021 at 20:56

answered Jul 19, 2021 at 20:29

T04435

14.3k5 gold badges60 silver badges59 bronze badges

Comments

Simba · Accepted Answer · 2022-01-11 14:33:25Z

0

Best way at the moment if you using css modules is as array. And there you can add regular classes without modules. Here is example:

<div className={[styles.restaurantEntry, styles.barEntry, 'alice', 'text-center']}</div>

answered Jan 11, 2022 at 14:33

Simba

2752 gold badges6 silver badges22 bronze badges

1 Comment

hello B Over a year ago

it does not work for me: it say "TS2322: Type 'string[]' is not assignable to type 'string'."

Geórgia Cavalcanti · Accepted Answer · 2019-03-20 18:37:48Z

-1

<div className={this.state.className && this.props.content.divClassName></div>

answered Mar 20, 2019 at 18:37

Geórgia Cavalcanti

631 silver badge6 bronze badges

4 Comments

Amanshu Kataria Over a year ago

Would be nice, if you can write why and how.

JMM Over a year ago

This would set className to a boolean. (It's also a syntax error because it's missing the }, but would not have the desired effect despite that.)

Geórgia Cavalcanti Over a year ago

Indeed is missing the } , my bad. But, in my apps I can work with this kind of method just fine. I also use ||, and it still works.

JMM Over a year ago

My mistake saying it would set className to a boolean :facepalm:, but it is applying boolean logic, so it's not concatenating the values or resulting in both being applied: it's applying one or the other. If both are non-empty strings and you && them, you'll get only the second one applied. If you || them you'll get only the first one applied. Whereas the question is asking how to apply both.

Yunnosch · Accepted Answer · 2020-09-05 06:18:13Z

-2

<div className={(classes.shiny, classes.round)}>
    i'm shiny and round.
</div>

This works with React + Material-UI makeStyles.

edited Sep 5, 2020 at 6:18

Yunnosch

26.8k9 gold badges46 silver badges66 bronze badges

answered Sep 3, 2020 at 19:57

Guy K

551 gold badge1 silver badge8 bronze badges

3 Comments

Guy K Over a year ago

I do honestly want anyone with information to comment on why this is not a good solution, as well as those who don't know, to know that it doesn't conform to any best practices. Any suggestions as to how I could convey that message are greatly appreciated.

Yunnosch Over a year ago

Please put those parts which are not answering into a comment.

Krzysiek Over a year ago

Sorry, but this is an invalid answer. Only second class is ever used. This is roughly translated to {className: ("shiny", "round")} which results in {className: "round"} MDN

Collectives™ on Stack Overflow

How can I add multiple className's to react component?

6 Answers 6

2 Comments

Comments

Comments

1 Comment

4 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

1 Comment

4 Comments

3 Comments

Linked

Related