Search code examples
htmlcssreactjsclassclassname

When should I use 'className' over 'class' and vise versa in react?

I'm making my first react app and i've come across something interesting, I sometimes use className over class on react. I'm just wondering if they are interchangeable or is it like this for a reason? I also notice that when I use class the inspect elements console asks me if I meant className, no errors, just asks.

Thanks in advance!

Solution

  • According to react docs:

    To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div>, <a>, and others.

    If you use React with Web Components (which is uncommon), use the class attribute instead.

    If you use class as an attribute, it is passed down without any validation to the underlying dom element, but it is not preferred approach. className is an attribute understood by react.

    React docs recommend on using cannonical React attribute names rather than the conventional Javascript naming, so even when React allows attributes to be passed through to DOM, it will give you a warning.