DEV Community

Agik Setiawan
Agik Setiawan

Posted on

3 2

How to create Style with typed safe in React JS

#javascript #react #css #typescript

That ways very simple using 'CSSProperties'

import { CSSProperties } from "react";
Enter fullscreen mode Exit fullscreen mode

create style

const BannerStyle : CSSProperties = {
        background: `url(/img/product/shop-bg.jpg)`,
        backgroundRepeat:'no-repeat',
        backgroundPosition:'center center',
        backgroundSize:'cover',
        position:'relative'
    }
Enter fullscreen mode Exit fullscreen mode

and then use style into html tag

<div style={BannerStyle}>
</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay