Explore all topics

How to Custom Style React Components

by vsasikalabe Updated: Jan 24, 2023

Custom styles can be applied in a variety of ways to React components. Here are a few typical methods:

Inline styles: can be applied to a component using the style attribute. It's beneficial for straightforward styles that only affect one component.
CSS stylesheets: Using the link tag in the head of your HTML file, you may construct a CSS stylesheet and link it to your React application. Then, you may apply styles to your components by using class names.
CSS modules: You can apply styles to your components by using CSS modules. The class names are immediately scoped to the component when you import CSS from a stylesheet into a component using CSS modules. Conflicts between class names in various components are avoided as a result.
Styled components: To apply styles to your components, use a library like styled-components. With the help of the well-known package styled-components, you can apply CSS styling to your React components by writing it in JavaScript code. Conflicts between class names in various components can be avoided by using this feature to define styled components that automatically have their styles scoped to the component.

Which strategy you go for will depend on your requirements and preferences. If necessary, you can combine these strategies in your app.

The following gives an example of how to use ReactJs' styled component to individually style components in your application:

Preview of the output that you will get on running this code from your IDE.

Code:

In this solution we use the React library.

Styled components in Reactjs

JavaScriptLines of Code : 52License : CC BY-SA 4.0

import React, { Component } from 'react';
import styled from 'styled-components';
import './App.css';

const Container = styled.div`
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 50px 50px;

  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
  }

  & > div:nth-child(1n) {
    background-color: #96ceb4;    
  }

  & > div:nth-child(3n) {
    background-color: #88d8b0;
  }

  & > div:nth-child(2n) {
    background-color: #ff6f69;
  }

  & > div:nth-child(4n) {
    background-color: #ffcc5c;
  }
`;


class App extends Component{
  render(){
    return (
      <Container>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </Container>
    );
  }
}

export default App;

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Install npm i styled-components
Open the folder in IDE.
Copy the code using "copy" button above and paste it in App.js and App.Css (line no 5 to 33) file(remove the earlier code from App.js and App.css).
Open the terminal from IDE.
npm start to run the file.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for 'Custom Style Components in Reactjs' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
The solution is tested on Nodejs 16.14.2 version.
react 18.2.0 version.
styled components 5.3.6 version.

Using this solution, we are able to Style components in Reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to Style components in Reactjs.