React CSS

React CSS refers to the various methods available in React to style components and elements, enable developers to create visually appealing, consistent and maintainable applications.

React supports multiple ways to apply CSS, making it flexible for different needs from simple inline styles to advanced CSS-in-JS libraries.

Inline CSS in React

You can add CSS styles directly to a specific element inside a component (like in React), without using any separate CSS file or class name.

In React, when you add styles directly to an element, you use JavaScript object syntax, not regular CSS. You use camelCase instead of the usual kebab-case syntax in CSS.

Example:

function StyledBox() {
  const boxStyles = {
    color: "navy",
    backgroundColor: "#f0f0f0",
    padding: "12px",
    borderRadius: "6px",
  };

  return <div style={boxStyles}>This box uses inline styling in React.</div>;
}

When to Use Inline Styles:

• We can use dynamic styling to make changes based on state or props.
• We use inline styles for one-time styles that are unique to a single element and won’t be reused.

External CSS Stylesheets

External stylesheets refer to .CSS files that are separate from your JavaScript or JSX files.

You write all your CSS in a separate file and then import it where needed, Instead of writing styles inside components like inline styling.

Setup:

1. Create a .css file (e.g., App.css).
2. Import the CSS file into the component where styles are needed.

Example:

In App.css:

.header {
  color: white;
  background-color: darkblue;
  padding: 15px;
  text-align: center;
}

In the component:

import './App.css';

function Header() {
  return <h1 className="header">Welcome to React Styling</h1>;
}

Benefits of External CSS:

• Reusability: We can apply styles to multiple components.
• Maintainability: Code is easy to manage with logic and styling separated.
• Cascading Effect: Global styling apply across your entire app, not just to one component.

CSS Modules

CSS Modules are a way to write CSS so that the styles are only applied to the component where they’re used.

They prevent global CSS conflicts (e.g., two components accidentally using the same class name).

Behind the scenes, CSS Modules generate unique class names for each style, so they do not conflicts with styles in other components.

When you use CSS Modules in React, the .css file is imported as a JavaScript object.

Each class name you define in the CSS becomes a property of that object.

You use that property to apply the style to your JSX element.

Setup:

1. Create a CSS Module file with a .module.css extension (for example > Button.module.css).
2. Import the module into the component.

Example:

In Button.module.css:

.button {
  color: white;
  background-color: green;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

In the component:

import styles from './Button.module.css';

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

Benefits of CSS Modules:

• Reusability: The same module can be imported in multiple components, making styles reusable without affecting others.

Styled Components (CSS-in-JS)

Styled Components is a popular CSS-in-JS library that allow you to define component-level styles directly in JavaScript files.

Styled Components generate unique class names automatically and support dynamic styling based on props or component state.

Installation:

npm install styled-components

Example:

import styled from 'styled-components';

const CustomButton = styled.button`
  color: #fff;
  background-color: ${props => props.isPrimary ? 'blue' : 'gray'};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: navy;
  }
`;

function MainApp() {
  return (
    <div>
      <CustomButton isPrimary>Primary Button</CustomButton>
      <CustomButton>Secondary Button</CustomButton>
    </div>
  );
}

export default MainApp;

Benefits of Styled Components:

• Component-Scoped Styles: No conflicts with other components or global styles.
• Dynamic Styling: Styles can change based on props or state.

Other CSS-in-JS Solutions

React offers many CSS-in-JS libraries similar to Styled Components. Some popular are:

• Emotion: This library known for its flexibility and efficiency. It works same as Styled Components but offers additional flexibility.
• JSS: A high-performance library with plugins for customization and theming.
• Aphrodite: Provides scoped CSS in JavaScript with built-in support for inline styles.

Choosing the Right CSS Approach

Selecting a CSS strategy depends on the requirements and complexity of your React application. Here are some guidelines to help you choose:

• Simple Applications: Use external CSS or inline styles for quick styling without complex requirements.
• Large Applications: Consider CSS Modules or Styled Components to avoid conflicts and create reusable styles.
• Dynamic Styling: Dependent on component state or props for styles , Styled Components or other CSS-in-JS libraries are usable.
• Global Themes: Use a combination of external CSS and CSS-in-JS solutions to apply theme-wide styling with flexible component-level styles.

Example Project Structure with CSS in React

src/
├── components/
│   ├── Button.module.css       # CSS Module for Button component
│   ├── Button.js
│   ├── Navbar.css              # External CSS for Navbar component
│   ├── Navbar.js
├── App.css                     # Global CSS
├── App.js
├── index.js

• In App.css Global CSS can handle global styling like fonts, colors and reset styles.
• CSS Modules like Button.module.css provide styles for specific components.
• External CSS files like Navbar.css apply for components requiring consistent global styles.