Styling Strategies In React

React offers various approaches to style components. Some of the most commonly used methods include:

Inline Styling
CSS Stylesheets
CSS Modules
Styled Components (CSS-in-JS)
Using CSS frameworks (Tailwind)

1. Inline Styling

Inline Styling is the practice of defining styles directly within the JSX code, using JavaScript objects instead of external stylesheets or style blocks

With Inline styling, double curly braces {{ ... }} are essentially used to interpolate the dynamic JavaScript object into the JSX code.

The property names in JavaScript object are camelCased to maintain alignment with JavaScript conventions. Creating an object with a key like "font-size" is not allowed in JavaScript hence it is camelCased as "fontSize".

const MyComponent = () => {
  return (
    <div
      style={{
        color: "blue",
        fontSize: "16px",
        border: "1px solid #ccc",
      }}
    >
      This is a component with inline styles.
    </div>
  );
};

Here's how it works,

The outer pair of curly braces {} denotes that you are injecting a JavaScript expression into the JSX.
The inner pair of curly braces {fontSize: "16px"} represents the JavaScript object itself.

It is also possible to assign a JavaScript object containing styles to a variable and subsequently pass it to the style attribute in JSX, as shown below

const MyComponent = ({ isHighlighted }) => {
  const dynamicStyle = {
    color: "blue",
    fontSize: "16px",
    border: "1px solid #ccc",
  };

  return <div style={dynamicStyle}>My Content</div>;
};

Pros & Cons

Pros	Cons
Component-specific styles: Inline styles allow you to define styles directly within the component, making it easy to create encapsulated and component-specific styles. Since styles are scoped to the component level, you don't have to worry about global scope issues that may arise with traditional stylesheets. Easier Debugging: Debugging can be more straightforward as styles are directly associated with the JSX code, making it easier to identify and fix styling issues. No External Dependencies: You don't need external tools or dependencies to manage styles.	Global Styles and Theming: Managing global styles or theming across multiple components may be less convenient. Readability and Maintainability: Inline styles can make the JSX code less readable and harder to maintain, especially when dealing with long style objects. CSS Pseudo-classes and Media Queries: Inline styles are less suitable for handling CSS pseudo-classes (:hover, :active, etc.) and media queries.

Pros

Cons

Component-specific styles:

Inline styles allow you to define styles directly within the component, making it easy to create encapsulated and component-specific styles.
Since styles are scoped to the component level, you don't have to worry about global scope issues that may arise with traditional stylesheets.

Easier Debugging: Debugging can be more straightforward as styles are directly associated with the JSX code, making it easier to identify and fix styling issues.

No External Dependencies: You don't need external tools or dependencies to manage styles.

Global Styles and Theming: Managing global styles or theming across multiple components may be less convenient.

Readability and Maintainability: Inline styles can make the JSX code less readable and harder to maintain, especially when dealing with long style objects.

CSS Pseudo-classes and Media Queries: Inline styles are less suitable for handling CSS pseudo-classes (:hover, :active, etc.) and media queries.

2. CSS Stylesheets

In React, stylesheets can be kept separate, imported and subsequently applied to elements within a component as demonstrated in the example below,

Import & Apply Stylesheet
Stylesheet

import React from "react";
import "./MyComponent.css"; // Import the stylesheet

const MyComponent = () => {
  return (
    // Applying styles using className prop
    <div className="myComponentContainer">
      <h1 className="myComponentTitle">Hello, I'm MyComponent!</h1>
    </div>
  );
};

export default MyComponent;

/* MyComponent.css */
.myComponentContainer {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}

.myComponentTitle {
  color: #333;
  font-size: 1.5rem;
}

The attribute used for applying CSS classes to HTML elements is named className instead of class for the following reason,

React uses JSX, which is a syntax extension for JavaScript and in JavaScript class is used to define classes.
To prevent confusion with the JavaScript class reserved keyword className prop is used to apply CSS classes to elements.

If you have global styles that should be applied across multiple components, you can import a global stylesheet in your main file (e.g., index.js or App.js).

Anyhow with this approach styles defined in one component can potentially affect other components as well since the styles dont have local scoping.

Pros & Cons

Pros	Cons
Simplicity: The setup is straightforward, involving simple import statements to include external stylesheets in your components. Pre-existing Styles: If you are integrating with existing stylesheets or third-party libraries, importing styles directly allows you to leverage and extend those styles. Consistent Styling Across Components: It provides a way to enforce consistent styling across components by utilizing shared styles defined in external stylesheets.	Limited Local Scoping: Styles are globally scoped, which can lead to unintentional styling interference and conflicts between components. Build Performance Impact: Depending on the project size, importing large external stylesheets into every component might have a performance impact, affecting the initial load time.

Pros

Cons

Simplicity: The setup is straightforward, involving simple import statements to include external stylesheets in your components.

Pre-existing Styles: If you are integrating with existing stylesheets or third-party libraries, importing styles directly allows you to leverage and extend those styles.

Consistent Styling Across Components: It provides a way to enforce consistent styling across components by utilizing shared styles defined in external stylesheets.

Limited Local Scoping: Styles are globally scoped, which can lead to unintentional styling interference and conflicts between components.

Build Performance Impact: Depending on the project size, importing large external stylesheets into every component might have a performance impact, affecting the initial load time.

3. CSS Modules

CSS Modules allow developers to write CSS styles that are scoped to specific components ensuring that styles do not leak out and affect other parts of the application.

To use CSS Modules in React,

Create a CSS file for each component and name it with the .module.css extension.
When importing styles in your component, you can assign the imported styles to a variable and apply them using that variable.

Import & Apply Stylesheet
Create Stylesheet

// Button.js
import React from "react";
import styles from "./Button.module.css";

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

export default Button;

/* Button.module.css */
.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #2980b9;
}

Using Hyphen-Separated Class Names

To access hyphen-separated class names in the styles object, use bracket notation styles["class-name"]. Dot notation (styles.className) won't work because of the hyphen.

Component
CSS

import styles from "./styles.module.css";

function Button() {
  return <button className={styles["my-class-name"]}>Click me</button>;
}

.my-class-name {
  background-color: blue;
}

Automated Scoping

The build tool (like webpack or a bundler configured with CSS Modules support) automatically generates unique class names for each CSS module. This ensures that the styles defined in one module don't clash with styles in another module.
For example, if you inspect the generated HTML, you might see a class name like Example_module__button__abc123.

Pros & Cons

Pros	Cons
Local Scoping: This minimizes the chances of naming conflicts, global namespace pollution and unintended style changes across different parts of the application. Modularity: Each component can have its own dedicated CSS module, making it easier to manage and maintain the styling codebase.	Tooling Dependency: It may involve additional tooling dependencies or build configurations to enable the processing of CSS files, which can add complexity to the development environment. Potential Overhead: In large projects with numerous components, the generated unique class names can contribute to an increase in file size. This overhead is usually minor but could be a consideration in performance-critical applications.

Pros

Cons

Local Scoping: This minimizes the chances of naming conflicts, global namespace pollution and unintended style changes across different parts of the application.

Modularity: Each component can have its own dedicated CSS module, making it easier to manage and maintain the styling codebase.

Tooling Dependency: It may involve additional tooling dependencies or build configurations to enable the processing of CSS files, which can add complexity to the development environment.

Potential Overhead: In large projects with numerous components, the generated unique class names can contribute to an increase in file size. This overhead is usually minor but could be a consideration in performance-critical applications.

4. Styled Components (CSS-in-JS)

Styled-components lets you style your components by writing CSS code using a feature called tagged template literals in JavaScript. This approach eliminates the need for mapping between components and styles.

Installation

Install styled-components using npm or yarn,

# with npm
npm install styled-components

# with yarn
yarn add styled-components

Basic Usage

The code in the below example involves,

Importing the styled-components library
Creating a styled button component with specific CSS styles using the styled.button syntax
Using this styled button component within a React App component

// Import style-components library
import styled from "styled-components";

// Creating a styled component
const StyledButton = styled.button`
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

// Using it in your component
const App = () => {
  <>
    <div>
      <StyledButton>Click Me</StyledButton>
    </div>
  </>;
};

export default App;

Dynamic Styling

Styled-components allows you to use props to conditionally apply styles, enabling dynamic styling based on component props.

const StyledButton = styled.button<{ $primary?: boolean; }>`
  background-color: ${(props) => (props.$primary ? "#3498db" : "#2ecc71")};
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.$primary ? "#2980b9" : "#27ae60")};
  }
`;

const App = () => {
  <>
    <div>
      <StyledButton>Normal</StyledButton>
      <StyledButton $primary>Primary</StyledButton>
    </div>
  </>;
};

export default App;

The attrs method in styled-components is a powerful tool for setting default and dynamic props on a styled component. It allows you to define default values for certain properties and provides a way to override those defaults when needed.

import styled from 'styled-components';
// Define a styled button component with dynamic props using attrs
const StyledButton = styled.button.attrs<{ $color?: string; $size?: string }>(props => ({
  // Set default static props
  type: "button",
  $color: props.$color || "#3498db",
  $size: props.$size || "1em",
}))`
  background-color: ${props => props.$color};
  color: #fff;
  padding: ${props => props.$size};
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

// Example usage of the StyledButton component
const App = () => {
  return (
    <div>
      {/* Default button with default styles */}
      <StyledButton>Default Button</StyledButton>

      <br />

      {/* Customized button with red color and larger size */}
      <StyledButton $color="#e74c3c" $size="2em">Red Big Button</StyledButton>
    </div>
  );
};

export default App;

Extending Styles

Using the styled() constructor, we can extend the styles of one styled component to another.

import styled from "styled-components";

const BaseButton = styled.button`
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

// ExtendedButton will have all the styles of BaseButton plus an additional style for font-weight
const ExtendedButton = styled(BaseButton)`
  font-weight: bold;
`;

// Example usage of the StyledButton component
const App = () => {
  return (
    <div>
      <BaseButton>Base Button</BaseButton>
      <br />
      <ExtendedButton>Extended Button</ExtendedButton>
    </div>
  );
};

export default App;

Creating Global Styles

createGlobalStyle is a utility function provided by the styled-components library in React. It allows you to create global styles that affect the entire application, applying styles directly to the <html> and <body> elements. This is especially useful for applying styles that should be consistent across all components.

import styled, { createGlobalStyle } from "styled-components";

// Create global styles using createGlobalStyle
const GlobalStyles = createGlobalStyle`
  /* Global styles go here */
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
  }

  h1 {
    color: #3498db;
  }
`;

// Styled component with local styles
const StyledBox = styled.div`
  color: #2ecc71;
  padding: 20px;
`;

// React component combining global styles and a local styled component
const App = () => (
  <>
    <GlobalStyles />
    <h1>Welcome to My App</h1>
    <StyledBox>This is a styled component with local styles.</StyledBox>
  </>
);

export default App;

Reference

For more detailed documentation please refer styled-components docs.

Pros & Cons

Pros	Cons
Reusable Components: Like normal React components, styled-components allow for creating small, reusable pieces of code to avoid duplication. Dynamic Styling: By utilizing props, styled-components offer dynamic values for flexible styling without duplicating styles. Theming Support: The ThemeProvider in styled-components facilitates creating a theme-based architecture while maintaining control over individual component styling. Isolation of Style: Styled-components provide encapsulation of styles, preventing global style conflicts by generating unique class names for each styled component. Autoprefixing and Vendor Prefixing: Styled-components handle autoprefixing and vendor prefixing behind the scenes, reducing the need for manual adjustments for cross-browser compatibility. Better Performance: The library optimizes by loading styling only for rendered components, enhancing performance compared to loading all styles at once in traditional styling methods.	Unusual Approach: Initially, writing styles in this manner may feel odd, but developers tend to adapt and find it beneficial over time. DOM Pollution: Debugging can be challenging due to the added levels of nesting by styled-components, which can clutter the React Devtools extension. Workarounds Required: Overengineering can occur by creating separate styled components for each DOM element, leading to conflicts and reduced readability; careful structuring is necessary to avoid this issue.

Pros

Cons

Reusable Components: Like normal React components, styled-components allow for creating small, reusable pieces of code to avoid duplication.

Dynamic Styling: By utilizing props, styled-components offer dynamic values for flexible styling without duplicating styles.

Theming Support: The ThemeProvider in styled-components facilitates creating a theme-based architecture while maintaining control over individual component styling.

Isolation of Style: Styled-components provide encapsulation of styles, preventing global style conflicts by generating unique class names for each styled component.

Autoprefixing and Vendor Prefixing: Styled-components handle autoprefixing and vendor prefixing behind the scenes, reducing the need for manual adjustments for cross-browser compatibility.

Better Performance: The library optimizes by loading styling only for rendered components, enhancing performance compared to loading all styles at once in traditional styling methods.

Unusual Approach: Initially, writing styles in this manner may feel odd, but developers tend to adapt and find it beneficial over time.

DOM Pollution: Debugging can be challenging due to the added levels of nesting by styled-components, which can clutter the React Devtools extension.

Workarounds Required: Overengineering can occur by creating separate styled components for each DOM element, leading to conflicts and reduced readability; careful structuring is necessary to avoid this issue.

5. Using CSS Framework (Tailwind)

Tailwind CSS is a popular utility-first CSS framework that allows you to quickly build designs by composing utility classes directly in your markup.

It provides a low-level set of utility classes that you can use to style your elements without writing custom CSS.

You may consult the Tailwind framwork guides to understand how it can be incorporated into the framework you're using and to learn more about its utility classes.

Implementation Steps For Create React App

Create your project

npx create-react-app my-project
cd my-project

Install Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths: This configuration specifies that Tailwind should analyze the files with pattern \*.{js,jsx,ts,tsx} to generate the styles.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

Start your build process
```
npm run start
```

Start using Tailwind in your project

export default function App() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}

Pros & Cons

Pros	Cons
Rapid Development: Tailwind can significantly speed up the styling process, as you don't have to write custom CSS for many common styles. Flexibility: Tailwind is flexible and allows for customization. You can extend the default configuration, create custom utility classes, and tailor it to fit your project's specific needs. Responsive Design: It simplifies responsive design by providing classes for various breakpoints. This makes it easier to create layouts that adapt to different screen sizes without writing complex media queries. No Naming Conventions: It eliminates the need for naming conventions, as styles are applied using utility classes. This can reduce the mental overhead associated with managing class names and the potential for naming conflicts. Size and Performance: Tailwind's utility-first approach can result in smaller file sizes compared to traditional CSS frameworks. This can contribute to better performance by reducing the amount of unused styles in the final production build.	HTML Purity Concerns: Some developers argue that the approach of embedding styles directly in HTML using utility classes can lead to a less clean and more cluttered HTML markup, making it harder to read and maintain. Learning Curve: New users might find it challenging to grasp Tailwind's pre-built classes, impacting productivity until a thorough understanding is achieved.

Pros

Cons

Rapid Development: Tailwind can significantly speed up the styling process, as you don't have to write custom CSS for many common styles.

Flexibility: Tailwind is flexible and allows for customization. You can extend the default configuration, create custom utility classes, and tailor it to fit your project's specific needs.

Responsive Design: It simplifies responsive design by providing classes for various breakpoints. This makes it easier to create layouts that adapt to different screen sizes without writing complex media queries.

No Naming Conventions: It eliminates the need for naming conventions, as styles are applied using utility classes. This can reduce the mental overhead associated with managing class names and the potential for naming conflicts.

Size and Performance: Tailwind's utility-first approach can result in smaller file sizes compared to traditional CSS frameworks. This can contribute to better performance by reducing the amount of unused styles in the final production build.

HTML Purity Concerns: Some developers argue that the approach of embedding styles directly in HTML using utility classes can lead to a less clean and more cluttered HTML markup, making it harder to read and maintain.

Learning Curve: New users might find it challenging to grasp Tailwind's pre-built classes, impacting productivity until a thorough understanding is achieved.