Learn
Turtle
Styled Components in React
Styled Components in React

Styled Components in React

Styling components in React can be done in many ways, most of the newcomers go for the traditional CSS sheets or modules but there are several ways of styling components which are very unique to React.

Major styling strategies :

CSS and SCSS Stylesheets

The use of stylesheets like the traditional way it is done with HTML, when used with a preprocessor it’s called SASS

CSS Modules

A CSS Module is a CSS file which contains all class names and animation names are scoped locally by default.

Styled-components

Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS using a technique called CSS-in-JS.

JSS

JSS generates actual CSS, not Inline Styles. It supports every existing CSS feature. JSS generates unique class names by default. It allows avoiding the typical CSS problem, where everything is global by default. It completely removes the need for naming conventions

Getting in details with Styled Components

General CSS stylesheets are global and have several conflicts. With Styled components, we are introduced to scoped styles, i.e., the styles written are applied only to a well defined context. This is a CSS in JavaScript styling, which means the CSS is created directly in the JavaScript code and that style is attached to an HTML tag or existing component to create a new Styled Component.

Styled Components have the following advantages :

1) It allows the styles to be dynamic in nature, it can change depending on the JavaScript properties

2) The components and styles are defined at one place, removing the component also means we remove the styling with it.

3) Styles are applied to only a single component, i.e., they are scoped.

Steps for using Styled Components in your Application

1. Installation

Like any other npm package, it requires a single line installation.

Using yarn :

yarn add styled-component

Using npm :

npm i styled-components

2. Getting Started :

Showing some basic examples of how Styled Components can be used to style the various components and how easy it is to configure them as per our needs.

1) Creating a basic style component

// Title component that'll render an <h1> tag
const Title = styled.h1`
 font-size: 1.5em;
 text-align: center;
 color: palevioletred;
`;
// Wrapper component that'll render a <section> tag
const Wrapper = styled.section`
 padding: 4em;
 background: papayawhip;
`;
// Use Title and Wrapper like any other React component
render(
 <Wrapper>
   &lt;Title&gt;
     Hello World!
   &lt;/Title&gt;
 </Wrapper>
);


2) Styles which can be dynamically changed by passing props or attributes

const Button = styled.button`
 
 /* primary prop will decide the color */
 
 background: ${props => props.primary ? "palevioletred" : "white"};
 color: ${props => props.primary ? "white" : "palevioletred"};
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border: 2px solid palevioletred;
 border-radius: 3px;
`;
render(
 <div>
   &lt;Button&gt;Normal&lt;/Button&gt;
   &lt;Button primary&gt;Primary&lt;/Button&gt;
 </div>
);

Shown above were two examples which were not impressive per se, but do tell you the immense scope of Styled Components and how easy it can make the designing of the React App we are building. It makes debugging the styling easier than the traditional CSS files and helps avoid the hassle of various class names.

In all, it is definitely recommended to use Style Components while making Websites using React or Apps using React Native.

Aditi Anshu
Aug 24, 2020
Engineering Undergrad, NIT P '22
Read More

Read 0 times

Comment!