
Styled Component in React
There are many options you can take when it comes to styling a React application. The traditional way would be to create an external CSS file. Styled-components is a popular library that is used to style React applications. It allows you to build custom components by writing actual CSS in your JavaScript.
Benefits of using styled-components:
Automatic critical CSS :
Styled-components keeps track of which components are rendered on a page and only adds their styles
No class name bugs :
Styled-components generates a unique class name for the styles
Easier deletion of CSS:
Styles are tied to a specific component rather than being added as a class name
Simple dynamic styling :
Styles can be added to a component based on props or a theme
Painless maintenance:
Styles added to a component is done all in one place, rather than across multiple files
Automatic vendor prefixing :
Styled-components handles all of this.
Installation:
The styled-components framework can be installed using either NPM or Yarn:
npm install styled-components (or)
yarn add styled-components
Then imported into React as follows:
import styled from "styled-components";
Create Styling components:
Styled-components utilises tagged template literals to style components. So in order to style our components we need to declare a variable that matches the component name.You can define what type of HTML element to render (div, h1, p, or button…):
Let's see in example:
Create a Styled-Component.
Styled-Component.js
import React from 'react';
import styled from 'styled-components';
export const StyledButton=styled.button`
background-color: orange;
color: white;
height: 4rem;
width: 16rem;
font-size: 25px;
border:1px solid red;`
Import the Styled-Component in App.js
App.js
import { StyledButton } from './Components/Styled-Components.js';
function App() {
return (
<div className="App">
<StyledButton>Login</StyledButton>
<StyledButton>Logout</StyledButton>
</div> );
}
export default App;
I hope this article was helpful for you to get started using styled-components with React.
Thanks for reading!