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 :

and press Enter in the keywbord..

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

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 :

and using quotation mark for styling .. like this

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

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

Result Picture :

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..