DEV Community

ibnul syam
ibnul syam

Posted on

Styling use styled-Component in React-Js

Hii dude..
i've learnd styling use styled component and now i want to share to you, i hope this knowledge can be useful for us.

1.First step, we must install library of styled component...
Enter the folder of your project and open CMD (Command Prompt) and write npm install styled-components or yarn add styled-components in your CMD such as picture bellow :

Image description
and press Enter in the keywbord..

2.Second step, we must import styled's library
such as picture bellow :

Image description

3.Last step, we can use that library..
Make variable and declaration of variable must be styled and (kind of element) for example like picture bellow :

Image description

and using quotation mark for styling .. like this

Image description

Now, we can use that variable in our class or function..
like this picture :

Image description

And let's check the result..
Code Picture :

Image description

Result Picture :

Image description

Why Styled Components?

The main purpose of using styled components is because it is modular and practical. If you use 1 css bundle, there will be many styles that are not used but are called by the browser, this is solved with styled components, the browser only calls styles that are only used by the component that has been rendered.

Another benefit is that it makes it easier for developers to map styled and component, no need to remember a lot of css selectors, because here components and styles are made at the same level, if you want to know the style of a component button, then just check the coding in the component button.

See you..

Top comments (0)