Building Web Applications with React and ASP.NET Core/

...

/

Styling Components with CSS

Styling Components with CSS

Learn to style the components of the Q&A app with CSS.

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:

Press + to interact
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:

Press + to interact
body {
  margin: 0; 
  background-color: #f7f8fa;
}
...