ASP.NET Core 3 and React

Styling the Header component

We can style the Header component by carrying out the following steps:

1. Import the Emotion functions and some of the style variables we set up previously into Header.tsx:

/** @jsx jsx */import { css, jsx } from '@emotion/core';import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';

2. Remove the React import statement. We don't need it anymore since we aren't importing anything from React and the @jsx comment is now telling Babel how to transpile the JSX.
3. Now, we can define the following style on the div container element:

<div  css={css`    position: fixed;    box-sizing: border-box;    top: 0;    width: 100%;    display: flex;    align-items: center;    justify-content: space-between;    padding: 10px 20px; background-color: ...