Easiest way to handle multiple styles in Reactjs

Reactjs

Reactjs is a frontend UI library for developing sophisticated web/native applications using Typescript/Javascript. The library is backed by Facebook and opensource community. For me it is like having a swiss knife in my tool kit.

Multiple Styles

For beginners handling styles in React components could difficult. When it came to styles with hyphen (back-style) we have to rely on array syntax.

<div className={styles['back-style']}>

So what about multiple styles ? We can use the array syntax or use the classNames package (multiple use of className property is not allowed in Reactjs as Vue 3 )

Let’s use the package

yarn add classnames

In the template / HTML use the classNames function to include multiple style classes.

import classNames from 'classNames'
<div className={classNames('font-style','back-style','container')}

That’s all you need to know.

Read more guides on reactjs