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: #fff;
    border-bottom: 1px solid ${gray5};
    box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21);
  `}
>
  ...
</div>

We are fixing this element to the top of the page by taking the whole width of the page up. We're also using a Flexbox layout, which will layout the app name, search box, and Sign In link nicely. We are also using background color and a nice box shadow to make the header pop out a bit.

4. Still in Header.tsx, we are going to move on to implementing styles on the anchor tag: 

<a
  href="./"
  css={css`
    font-size: 24px;
    font-weight: bold;
    color: ${gray1};
    text-decoration: none;
  `}
>
  Q & A
</a>

Here, we are making the app name fairly big, bold, and dark gray, and also removing the underline.

5. Let's move on and style the search box:

<input
  type="text"
  placeholder="Search..."
  css={css`
    box-sizing: border-box;
    font-family: ${fontFamily};
    font-size: ${fontSize};
    padding: 8px 10px;
    border: 1px solid ${gray5};
    border-radius: 3px;
    color: ${gray2};
    background-color: white;
    width: 200px;
    height: 30px;
    :focus {
      outline-color: ${gray5};
    }
  `}
/>

Here, we are using the standard font family and size and giving the search box a light gray rounded border. Notice the nested pseudo-class definitions for defining the outline color when the search box has focus. This is very much like how we can structure the CSS in SCSS.

6. The last change we'll make in the Header.tsx file is being done to style the Sign In link:
   

<a
  href="./signin"
  css={css`
    font-family: ${fontFamily};
    font-size: ${fontSize};
    padding: 5px 10px;
    background-color: transparent;
    color: ${gray2};
    text-decoration: none;
    cursor: pointer;
    span {
      margin-left: 10px;
    }
    :focus {
      outline-color: ${gray5};
    }
  `}
>
  <UserIcon />
  <span>Sign In</span>
</a>

7. Next up is styling the UserIcon component in the Icons.tsx file. Let's import the Emotion functions and remove the React import:

/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import user from './user.svg';

8. Now, we can define the styles on the ImgIcon component on the img tag:

<img
  src={user}
  alt="User"
  css={css`
    width: 12px;
    opacity: 0.6;
  `}
/>

We've moved the width from the attribute on the img tag into its CSS style. Now, the icon is a nice size and appears to be a little lighter in color.

9. If we look at the running app, we'll see that our app header is looking much nicer now:

We are getting the hang of Emotion now. The remaining component to style is HomePage– we'll look at that next.