How to make SCSS classname unique?

Question

I am using scss in react.

I have two components that have <img className='logo' />

and both components have independent .scss files.

I want to customize the styles of two .logo (s) differently.

What should I do to make classnames unique when rendered?

Answer 1

just use different classnames for styling ex:homepage-logo , article-logo

Answer 2

you can use css-modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

React support is native, you can check-in documentation