React, add css class from props

Question

I'm trying to add a class to my Card component, so that I can choose the layout while I'm inserting it. But the props is not interpreted in the className, how can I add a css class this way?

Component

 function Card(props) {
        return (
          <div className="d-flex mx-auto {props.layout}" >
            <div className="background my-auto">
              <div className="d-flex justify-content-center">
                <h3>{props.title}</span></h3>
              </div>
              <div className="d-flex h-100">
                <div className="w-100 my-auto">
                  <p>{props.text}</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

In Layout

<Card
 layout="my-green-bg"
 title="my title"
 text="my text"
/>

`className={\`d-flex mx-auto ${props.layout}\`}` – Felix Kling Jan 06 '20 at 21:00 — Felix Kling, Jan 06 '20 at 21:00

score 1 · Accepted Answer · answered Jan 06 '20 at 21:01

1

Try the following:

<div className={`d-flex mx-auto ${props.layout}`}>

Or without template literals:

<div className={'d-flex mx-auto ' + props.layout}>

I hope this helps!

answered Jan 06 '20 at 21:01

norbitrial

14,716
7
32
59

score 1 · Answer 2 · answered Jan 06 '20 at 21:01

You can try the below code.

function Card(props) {
    const classes = [ 'd-flex', 'mx-auto' ];
    if (props.layout) classes.push(props.layout);
        return (
          <div className={ classes.join(' ') } >
            <div className="background my-auto">
              <div className="d-flex justify-content-center">
                <h3>{props.title}</span></h3>
              </div>
              <div className="d-flex h-100">
                <div className="w-100 my-auto">
                  <p>{props.text}</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

The other way can be

function Card(props) {
        return (
          <div className={ 'd-flex mx-auto ' + props.layout } >
            <div className="background my-auto">
              <div className="d-flex justify-content-center">
                <h3>{props.title}</span></h3>
              </div>
              <div className="d-flex h-100">
                <div className="w-100 my-auto">
                  <p>{props.text}</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

React, add css class from props

2 Answers2