Implementing CSS in React!!

In this blog, we shall see what is CSS in React, What are the approaches of using CSS in React, How to use CSS in differenet approaches in React.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the visual appearance and formatting of a document written in HTML (Hypertext Markup Language) or XML (eXtensible Markup Language). It provides a set of rules and properties that define how elements within a web page should be displayed on various devices and screen sizes.

CSS in ReactJS and its Types

In ReactJS, CSS refers to the implementation of Cascading Style Sheets within the context of building React components and applications. CSS in ReactJS involves the management and application of styles to the user interface elements rendered by React components. ReactJS, being a JavaScript library for building user interfaces, provides a component-based approach to web development. Each React component encapsulates its own logic, structure, and styles. CSS in ReactJS aims to address the challenges of managing and applying styles within this component-based architecture.

There are primarily three approaches to implementing CSS in ReactJS:

1. Inline Styles: React allows you to define styles directly within JSX using inline styles. Instead of writing CSS classes, you can define style objects using JavaScript syntax and apply them to specific elements within your components. Inline styles are scoped to individual components, providing encapsulation and reducing global CSS conflicts.

2. CSS-in-JS Libraries: CSS-in-JS libraries, such as styled-components, Emotion, and CSS Modules, offer a more comprehensive and expressive way of managing styles in ReactJS. These libraries allow you to write CSS styles directly in your JavaScript code, either by defining styled components or using special syntax to encapsulate styles within your components. CSS-in-JS libraries provide benefits like scoped styles, component reusability, dynamic styling, and the ability to leverage JavaScript for styling logic.

3. CSS Modules: CSS Modules is an approach that combines CSS files with JavaScript modules. With CSS Modules, you write traditional CSS code in separate files and import them into your React components as JavaScript modules. CSS Modules generate unique class names for each component, ensuring style encapsulation and avoiding naming collisions. This approach allows you to use standard CSS syntax while enjoying the benefits of scoped styles and modular CSS organization.

Implementing the Types of Approaches of CSS in ReactJS

Inline Styles:

So in this approach, we will be seeing how to style the components in our React project using Inline Styles.

To understand it properly we will create a button component and center it on the page and style it using Inline Styles.

As you can see above we created two object main and styles to style the main div and the button.

We add the style of the main div in the main object and the style of button in the styles object.

In the main object we have the add the flex property and then added the properties for centering the child of the main div.

In the styles object we have add the styling for a button and styled it so that it seems to be a button.

And in finally we gave the main and styles and a style attirbute to both main div and the button.

The output of the above code:-

Styled-Components:-

Styled components is a popular CSS-in-JS library that allows you to write CSS styles directly within your React components. It provides a way to create and style components using tagged template literals, offering a powerful and intuitive approach to managing styles in ReactJS. Here's are the steps for using styled components in ReactJS:

1. Install the styled-components library:

    npm install styled-components
   

2. Import the necessary dependencies:

    import React from 'react';
    import styled from 'styled-components';
   

3. Define a styled component:

    const Button = styled.button`
      background-color: #f0f0f0;
      color: #333;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
   
      &:hover {
        background-color: #ccc;
      }
    `;
   

4. Use the styled component in your React component:

    function MyComponent() {
      return (
        <div>
          <h1>Welcome to MyComponent</h1>
          <Button>Click Me</Button>
        </div>
      );
    }
   

5. After importing and creating the styled components the code should look similar to this :

    import React from 'react';
    import styled from 'styled-components';
   
    // Define styled components
    const Container = styled.div`
      background-color: #f0f0f0;
      padding: 20px;
    `;
   
    const Title = styled.h1`
      color: #333;
      font-size: 24px;
    `;
   
    const Button = styled.button`
      background-color: #333;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    `;
   
    function MyComponent() {
      return (
        <Container>
          <Title>Welcome to MyComponent</Title>
          <Button>Click Me</Button>
        </Container>
      );
    }
   

CSS Modules:

In this approach, we will create another file for styling every component which we create in our project.

To understand it properly we will create a button and center it on our page, same as we have done in the inline styles.

So as you can see we have created two different for our component structure and for styling. The two files which we created are App.jsx and App.css.

App.jsx contains the structure of the page like HTML, and App.css container the styling of that page.

So as we create objects to style the components which we create in that particular file in inline styles, in the similar fashion we create block of code in CSS Modules which will be passed as className to the components so that the styling will be visible to us.

So as you can see we have done the same styling as in the inline styles, we created a button which is in the center of the container main div, we gave flex, justify-content and align-items property so that we can center the button. And to the button we gave it background color, border radius, cursor, padding, font size and color property so that the button looks good.

The output of the above code:-

So, in this blog, we have learned about What is CSS, What are the approaches of CSS in React and How to use those Approaches. There is much more to learn about the use of CSS in ReactJS, explore this topic and its used cases and elevate your skills.

In the next blog, we shall see "Fetching Data from API in ReactJS". To know more, make sure to watch the video on our Youtube channel. Happy Coding!!

Adios Amigos 👋👋