React CSS Styling

Introduction

In this chapter, we will explore various methods for styling React components using CSS. Styling is a crucial part of web development as it enhances the visual appeal and usability of a web application. We will cover different techniques, including inline styles, CSS classes, CSS modules, and styled-components.

Table of Contents

1. What is CSS Styling?
2. Inline Styles
   • Example: Applying Inline Styles
3. CSS Classes
   • Example: Using CSS Classes
4. CSS Modules
   • Example: Using CSS Modules
5. Styled-Components
   • Example: Using Styled-Components
6. Key Features of React CSS Styling
7. Conclusion

What is CSS Styling?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is used to control the layout, colors, fonts, and overall visual appearance of a web page. In React, there are several ways to apply CSS styling to components.

Inline Styles

Inline styles are applied directly to elements using the style attribute. This method is useful for applying dynamic styles or styles that depend on JavaScript variables.

Example: Applying Inline Styles

1. Create a New File for the Component: In the src directory, create a new file named InlineStyledComponent.js.

2. Define the Component: Add the following code to InlineStyledComponent.js to create a functional component with inline styles:

   // InlineStyledComponent.js
   import React from 'react';
   
   function InlineStyledComponent() {
     // Define styles as a JavaScript object
     const divStyle = {
       backgroundColor: 'lightblue',
       padding: '20px',
       borderRadius: '5px'
     };
   
     return (
       <div style={divStyle}>
         <h1 style={{ color: 'darkblue' }}>Hello, World!</h1>
         <p>This component is styled with inline styles.</p>
       </div>
     );
   }
   
   export default InlineStyledComponent;
   

   Explanation:

   • We define a JavaScript object divStyle containing CSS properties and values.
   • We apply these styles to the div element using the style attribute.
   • We also apply an inline style directly to the h1 element.

3. Use the Component in App.js: Open src/App.js and modify the App component to use the InlineStyledComponent:

   // App.js
   import React from 'react';
   import InlineStyledComponent from './InlineStyledComponent';
   
   function App() {
     return (
       <div>
         <InlineStyledComponent />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see a component styled with inline styles.

CSS Classes

Using CSS classes is the most common method for styling React components. You define styles in a separate CSS file and apply them to elements using the className attribute.

Example: Using CSS Classes

1. Create a New CSS File: In the src directory, create a new file named styles.css.

2. Define CSS Classes: Add the following styles to styles.css:

   /* styles.css */
   .container {
     background-color: lightcoral;
     padding: 20px;
     border-radius: 5px;
   }
   
   .title {
     color: darkred;
   }
   

   Explanation:

   • We define two CSS classes: .container and .title.
   • The .container class applies styles to the container element.
   • The .title class applies styles to the title element.

3. Create a New File for the Component: In the src directory, create a new file named ClassStyledComponent.js.

4. Define the Component: Add the following code to ClassStyledComponent.js to create a functional component that uses CSS classes:

   // ClassStyledComponent.js
   import React from 'react';
   import './styles.css'; // Import the CSS file
   
   function ClassStyledComponent() {
     return (
       <div className="container">
         <h1 className="title">Hello, World!</h1>
         <p>This component is styled with CSS classes.</p>
       </div>
     );
   }
   
   export default ClassStyledComponent;
   

   Explanation:

   • We import the CSS file containing the class definitions.
   • We apply the CSS classes to the div and h1 elements using the className attribute.

5. Use the Component in App.js: Open src/App.js and modify the App component to use the ClassStyledComponent:

   // App.js
   import React from 'react';
   import ClassStyledComponent from './ClassStyledComponent';
   
   function App() {
     return (
       <div>
         <ClassStyledComponent />
       </div>
     );
   }
   
   export default App;
   

6. Save and View Changes: Save the files and go to your browser. You should see a component styled with CSS classes.

CSS Modules

CSS modules are a way to scope CSS styles to a specific component, preventing styles from leaking into other components. This is useful for large applications with many components.

Example: Using CSS Modules

1. Create a New CSS Module File: In the src directory, create a new file named ModuleStyledComponent.module.css.

2. Define CSS Module Styles: Add the following styles to ModuleStyledComponent.module.css:

   /* ModuleStyledComponent.module.css */
   .container {
     background-color: lightgreen;
     padding: 20px;
     border-radius: 5px;
   }
   
   .title {
     color: darkgreen;
   }
   

   Explanation:

   • We define two CSS classes: .container and .title.
   • These styles are scoped to the module and won’t affect other components.

3. Create a New File for the Component: In the src directory, create a new file named ModuleStyledComponent.js.

4. Define the Component: Add the following code to ModuleStyledComponent.js to create a functional component that uses CSS modules:

   // ModuleStyledComponent.js
   import React from 'react';
   import styles from './ModuleStyledComponent.module.css'; // Import the CSS module
   
   function ModuleStyledComponent() {
     return (
       <div className={styles.container}>
         <h1 className={styles.title}>Hello, World!</h1>
         <p>This component is styled with CSS modules.</p>
       </div>
     );
   }
   
   export default ModuleStyledComponent;
   

   Explanation:

   • We import the CSS module and assign it to a variable styles.
   • We apply the scoped CSS classes to the elements using styles.container and styles.title.

5. Use the Component in App.js: Open src/App.js and modify the App component to use the ModuleStyledComponent:

   // App.js
   import React from 'react';
   import ModuleStyledComponent from './ModuleStyledComponent';
   
   function App() {
     return (
       <div>
         <ModuleStyledComponent />
       </div>
     );
   }
   
   export default App;
   

6. Save and View Changes: Save the files and go to your browser. You should see a component styled with CSS modules.

Styled-Components

Styled-components is a library for React and React Native that allows you to use component-level styles in your application. It utilizes tagged template literals to style components.

Example: Using Styled-Components

1. Install Styled-Components: Run the following command to install styled-components:

   npm install styled-components
   

2. Create a New File for the Component: In the src directory, create a new file named StyledComponent.js.

3. Define the Component: Add the following code to StyledComponent.js to create a functional component using styled-components:

   // StyledComponent.js
   import React from 'react';
   import styled from 'styled-components'; // Import styled-components
   
   // Define styled components
   const Container = styled.div`
     background-color: lightyellow;
     padding: 20px;
     border-radius: 5px;
   `;
   
   const Title = styled.h1`
     color: darkorange;
   `;
   
   function StyledComponent() {
     return (
       <Container>
         <Title>Hello, World!</Title>
         <p>This component is styled with styled-components.</p>
       </Container>
     );
   }
   
   export default StyledComponent;
   

   Explanation:

   • We import the styled object from styled-components.
   • We define Container and Title styled components using tagged template literals.
   • We use these styled components in the JSX to apply styles.

4. Use the Component in App.js: Open src/App.js and modify the App component to use the StyledComponent:

   // App.js
   import React from 'react';
   import StyledComponent from './StyledComponent';
   
   function App() {
     return (
       <div>
         <StyledComponent />
       </div>
   
   
     );
   }
   
   export default App;
   

5. Save and View Changes: Save the files and go to your browser. You should see a component styled with styled-components.

Key Features of React CSS Styling

1. Multiple Methods: React supports various methods for applying CSS styles, including inline styles, CSS classes, CSS modules, and styled-components.
2. Dynamic Styling: Inline styles and styled-components allow for dynamic styling based on JavaScript variables.
3. Scoped Styles: CSS modules and styled-components help to scope styles to specific components, preventing style leakage.
4. Component-Level Styles: Styled-components enable defining styles at the component level, enhancing reusability and maintainability.

Conclusion

In this chapter, you learned how to style React components using different techniques, including inline styles, CSS classes, CSS modules, and styled-components. Each method has its advantages and use cases, allowing you to choose the best approach for your project.