CODEWITHSUNDEEP
javascriptreactjs
The Dead Man
The Dead Man

Reputation: 5566

How do I add classes dynamically in React 16+?

I have simple a React application, and I would like to add classes dynamically in my components.

Note: I am using React 16.6.3.

Here is what I have tried:

Layout component

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';
const layout = (props) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop </div>
        <main className={classes.Content}>
        {props.children}
        </main>
    </Aux>
);

export default layout;

Here's what I have in Layout.css:

.Content{
    margin-top: 16px;
    color: green;
}

Unfortunately when I run the application no classes is added to my div main. What am I doing wrong?

Upvotes: 0

Views: 390

Answers (2)

Fernando Colom
Fernando Colom

Reputation: 377

You can pass variables for a class with properties. The name for the component need to be capitalised. Layout.

Example:

const Layout = (props) => (
<Aux>
    <div>Toolbar, SideDrawer, Backdrop </div>
    <main className={props.customClass}>
    {props.children}
    </main>
</Aux>

When yo call your component, yuo can do it like this:

<div>
   <Layout customClass="dynamic-class" />
</div>

Upvotes: 0

ethan.roday
ethan.roday

Reputation: 2635

By convention in CRA, CSS modules should be named with .module.(s)css. So just change the name of Layout.css to Layout.module.css. You’ll also need to change the import to import * as classes since the build process does not generate a default export.

Upvotes: 1

Related Questions