DEV Community

mercy0002
mercy0002

Posted on

Different Ways to Write CSS in React

CSS (Cascading Style Sheets) are an important aspect of web development since they define the visual presentation of web applications. When integrating CSS with React, a popular JavaScript toolkit for developing user interfaces, developers have a number of alternatives for writing and managing styles. These various approaches enable flexibility and customization while meeting a wide range of project requirements and developer preferences.

In this investigation of "Different Ways to Write CSS in React," we will look at Three various approaches for styling React components. Each strategy has its own set of advantages and disadvantages. Understanding the benefits and drawbacks of these strategies allows developers to make informed decisions that best meet the demands of their projects, whether it's retaining modularity, attaining component-based styling, or guaranteeing a smooth user experience. Let's take a tour of the CSS environment in React to discover the tools and approaches that enable developers to create beautiful and responsive web applications.

inline CSS

Inline CSS in React is a means of directly applying CSS styles to individual components or elements within your application using the style attribute in JSX. This enables you to specify and customize styles for specific components or elements without requiring the use of external CSS files or CSS-in-JS tools. In React, inline CSS works as follows:

const myComponent = () => {
  const inlineStyles = {
    color: 'blue',
    fontSize: '16px',
  };

  return <p style={inlineStyles}>This is a blue and larger-sized text.</p>;
};
Enter fullscreen mode Exit fullscreen mode

OR

const myComponent = () => {
  const textColor = 'blue';
  return (
    <p style={{ color: textColor, fontSize: '16px' }}>
      This is a blue and larger-sized text.
    </p>
  );
};
Enter fullscreen mode Exit fullscreen mode

CSS Modules

CSS Modules is a popular technique for managing and scoping CSS styles in React applications. It helps to encapsulate styles for individual components, preventing global scope pollution and naming conflicts. it works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.

A CSS Module stylesheet is similar to a regular stylesheet, only with a different extension (e.g. styles.module.css). Here’s how they’re set up:

Create a file with .module.css as the extension.
Import that module into the React app (like we saw earlier)
Add a className to an element or component and reference the particular style from the imported styles.

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Component Libraries with Built-in Styles

Component libraries with built-in styles are pre-designed and pre-built collections of user interface components that include their own predefined styles, making it easier to develop visually appealing and consistent user interfaces in React applications. These libraries are frequently used to speed up development by offering ready-made components that correspond to design standards, accessibility best practices, and a consistent design language.

To use a component library with built-in styles in a React application, first add the library to your project as a dependency. I'll demonstrate using the Material-UI library, which is a popular React component library that includes pre-designed components and styles.

Here's a step-by-step tutorial for incorporating Material-UI into your React application:

  1. Install Material-UI: Install Material-UI as a dependency in your project. You can use npm or yarn for this: 
// Using npm:
npm install @mui/material @mui/icons-material

// Using yarn:
yarn add @mui/material @mui/icons-material
Enter fullscreen mode Exit fullscreen mode
  1. Import and Use Material-UI Components: You can now import and use Material-UI components in your React components. Here's an example of how to create a simple button using Material-UI: 
import React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Conclusion
The multiple CSS writing methods in React provide developers with numerous options for styling their web apps. Each strategy has its own set of benefits and considerations, so choosing the best method depending on the project's requirements and team preferences is critical.

Top comments (0)