How to get rid of the "className" attribute in JSX?

My JSX files are full of:

<div className="...">...</div>

For example:

const Page = () => (<div className="Page"><div className="sideMenu"><Route path="/" component={SidemenuMainCont} /></div><div className="mainColumn"><div className="header"><Header /></div><div className="section"><Route path="/" component={TenCont} /></div><div className="footer"><Footer /></div></div><AuthLoginModalCont /></div>);

This code looks wired because of this. "className" is too long for a repeatedly used attribute. Is there any common practice to get rid of this annoying repeats? Or to make it shorter?

I can make a custom component like this:

<Div cl="...">...</Div>

But I am interested if there is a common practice for this. Perhaps there is already an alias for the className attributes? Or some other way to set a CSS class name.

UPDATE

Thanks, Przemysław Zalewski for an interesting idea. But actually I am using CSS modules. So my code is:

import S from "./_.scss";...<div className={S.Page}>...</div>

And it does not work:

<Styled {S.Page}>...</Styled>