Copyright from Google Images.

Styling React Components (Using Styled-Components): Learning

Author: Pratha Bhatnagar

We’ve been using React for one of our project and during our transition, we found styled components to be a far better approach of styling. After comparing styled components to our existing styling methods , it was concluded that they are a much better and convenient way to quickly style the react components.

One of the most important thing to know about styled components is that, they will always pass through known HTML attributes to the rendered markup, such as style.

What is Styled Component :

It is a CSS in JS styling library that makes it very easy to add styles to react components without the need of an external CSS file.

Why to use Styled Components:

Using Styled Component, we can enhance CSS for styling React components. The best part of it, is the ability to add specific styles based on props passed to the component.

Styled Component comes with following features:
a. Normal CSS Syntax
b. Scoped Style
c. Props based conditional styles
d. Painless Maintenance
e. Easier Deletion of CSS

How Styled Components work?:

Styled Components make use of JavaScript Template Literals to style the components. Using this, we can keep the UI consistent across multiple applications.
If you want to use Styled Components in your application, you need to install its library in your machine. After installing run the following command on your terminal.

npm install --save styled-components

We can make the HTML entities as React Components, which would be generic in all manner.

Lets see how we can make a “Button” component .

import React from ‘react’;
import styled from ‘styled-components’;const Button = styled.button`
 background-color: #008489;
 border:1px solid #008489;
 color:#fff;
 padding:10px;
 text-align:center;
 text-decoration:none;
 display:inline-block;
 font-size:16px;
 cursor:pointer;
 margin-right:10px;
`;export default () =>(
 <Button> Button</Button>
);

Now, if you want to use this Button with different stylings, such as Background color and border color, then we can pass a keyword (For eg : Primary used in the below code)

import React from ‘react’;
import styled from ‘styled-components’;const Button = styled.button`
 background-color: ${props =>(props.primary ? “#F37921” : “#008489”)};
 border:${props =>(props.primary ? “#F37921” : “#008489”)};
 color:#fff;
 padding:10px;
 text-align:center;
 text-decoration:none;
 display:inline-block;
 font-size:16px;
 cursor:pointer;
 margin-right:10px;
`;export default () =>(
 <Button primary>Button</Button>
);

In the similar manner, we can create multiple customised tags like:

import React from ‘react’;
import styled from ‘styled-components’;const AnchorTag = styled.a
 text-decoration:none;
 display:inline-block;
 color:#008489;
`;export default () =>(
 <AnchorTag>Button</AnchorTag>
);

Rather than using simple HTML tags, we can replace them with the above created styled.a and styled.button to render “a” or “button” in DOM.

Further, we can use pseudo classes easily using ‘&’.

For example:.

import React from ‘react’;
import styled from ‘styled-components’;const AnchorTag = styled.a`
 text-decoration:none;
 display:inline-block;
 color:#008489; &:hover{
 text-decoration:underline;
 color:#000;
 }
`;export default () =>(
 <AnchorTag primary>Button</AnchorTag>
);

We can pass condition for particular widget like this:

Here is Card widget in which we pass widget Name(e.g:News),So using this widget Name we can pass different styles using Styled Component:

import React from ‘react’;
import styled from ‘styled-components’;export const Card = styled.div`
padding:${props =>(props.widgetName==="News" ? '16px 0' : '16px')};            color:${props =>(props.widgetName==="News" ? '#000' : '#333')};
`;<Card widgetName={'News'}>
        <Table/>
</Card>

Conclusion

So far, we have learnt how to use Styled Component to make reusable react component. Styled Components follow SASS format for CSS.

Using Styled Components, further we can use Media queries, Color Variables,Animations, Theming and many more things.