Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Styling Components with CSS

Explore how to style React components with regular CSS, including applying styles to the document body, app, and header components. Understand the challenges of global CSS scope and class name collisions in React projects. Learn practical methods to structure and name CSS classes to prevent conflicts, such as using the BEM naming convention, enhancing style maintainability in component-based applications.

We'll cover the following...

In this section, we’re going to style the body, app container, and header container with regular CSS and understand the drawbacks of this approach.

Styling the document body

We are going to use the traditional approach to style the document’s body. Follow these steps to do so:

  1. Open index.tsx. Remember that index.tsx is the root of the React component tree. Notice how the CSS file is referenced:

NAME_
CSS
import './index.css';

To reference a CSS file in a React component, we specify the location of the file after the import statement. index.css is in the same folder as index.tsx, so the import path is ./.

  1. Open index.css. Notice that we already have CSS in place for the body tag. Let’s remove everything apart from margin and add a background color:

NAME_
CSS
body {
  margin: 0; 
  background-color: #f7f8fa;
}
...