Styling use styled-Component in React-Js

ibnul syam — Wed, 06 Apr 2022 06:19:58 +0000

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

Get Data API

ibnul syam — Thu, 31 Mar 2022 02:29:56 +0000

HI, I've learned about Get data to API using Callback,
and Now i want to share my experience

DEV Community: ibnul syam

Styling use styled-Component in React-Js

Why Styled Components?

Get Data API