Back ArrowExplore all kits

How to Custom Style React Components

share link

by vsasikalabe dot icon Updated: Jan 24, 2023

technology logo
technology logo

Solution Kit Solution Kit  

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

JavaScriptdotLines of Code : 52dotLicense : Strong Copyleft (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.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Install npm i styled-components
  5. Open the folder in IDE.
  6. 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).
  7. Open the terminal from IDE.
  8. 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.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.
  4. 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.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.

Support
    Quality
      Security
        License
          Reuse

            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.
            Support
              Quality
                Security
                  License
                    Reuse

                      You can search for any dependent library on kandi like 'react'.

                      Support

                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page

                      See similar Kits and Libraries

                      Open Weaver – Develop Applications Faster with Open Source

                      kandi

                      Community and Support

                      Company

                      Follow

                      • © 2023 Open Weaver Inc.