Passing className to components in React

In React, we are familiar with the concepts of a className on components. It’s the way React adds the class attribute to an element.
It looks like this:

<div className=”bg-red-200″></div>

However, what happens if we want to make ou…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Chris Bongers

In React, we are familiar with the concepts of a className on components. It's the way React adds the class attribute to an element.
It looks like this:

<div className="bg-red-200"></div>

However, what happens if we want to make our custom components have the option to allow dynamic classNames?

To give you an example, let's say we have a CustomComponent that can take a className from wherever it's imported.

<CustomComponent className='bg-red-200` />

If we ran this in React, we would get shown an error as the CustomComponent doesn't know what a className is.
So let's fix that.

Passing Classnames as props in React

In all honesty, I probably made it sounds like it was going to be very complicated, right?

Well, fear not, it's not that scary, as we can pass the className as a prop!

So in your child component, we would structure its receiving end like this.

export default Child = ({ className }) => {
  return (
    <div className={className}>
      <h2>I'm the child component</h2>
    </div>
  );
};

And now, we can use this component like this.

<Child className='bg-red' />

And that's it. Our component will now render this classname on its main div.

Mixing classes

I also wanted to take a second to look at what happens if your child component always has certain classes and you want to add extra classes.

In that case, the props stay the same. However, we can dynamically render them like this.

<div className={`existing-class ${className}`}>

Our component will always render existing-class as a class but add whatever we set on it.

So if we use it like this:

<Child className='bg-red' />

Our result will be a div like this.

<div class="existing-class bg-red"></div>

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Chris Bongers


Print Share Comment Cite Upload Translate Updates
APA

Chris Bongers | Sciencx (2022-10-25T08:40:30+00:00) Passing className to components in React. Retrieved from https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/

MLA
" » Passing className to components in React." Chris Bongers | Sciencx - Tuesday October 25, 2022, https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/
HARVARD
Chris Bongers | Sciencx Tuesday October 25, 2022 » Passing className to components in React., viewed ,<https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/>
VANCOUVER
Chris Bongers | Sciencx - » Passing className to components in React. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/
CHICAGO
" » Passing className to components in React." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/
IEEE
" » Passing className to components in React." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/. [Accessed: ]
rf:citation
» Passing className to components in React | Chris Bongers | Sciencx | https://www.scien.cx/2022/10/25/passing-classname-to-components-in-react/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts