https://frontendmasters.com/courses/intermediate-react-v2/emotion-setup-nav-bar/

CSS in JS

Building the nav bar

Emotion

Brian finds CSS in JS solution compelling, helps him to write CSS.

Emotion is currently the most used and most performant library. Previously he was using Styled Components.

After the compilation it will create a separate CSS file.

Installing it

npm install @emotion/core @emotion/babel-preset-css-prop

This will do some extra pre-compilation to make it even faster.

Update .babelrc:

  {
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env",
    [
     // **** 1. add this for babel.  ↴
      "@emotion/babel-preset-css-prop",
       // **** 2. don't add sourceMaps.  ↴
       // right now emotion doesn’t play well with source maps.
      {
        "sourceMap": false
      }
    ]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Create the Component

  //  ****NavBar.js****


import React from "react";
import { Link } from "@reach/router";
import { css, keyframes } from "@emotion/core";
import colors from "./colors";

const Spin = keyframes`
  to {
    transform: rotate(360deg);
  }
`;

const NavBar = () => (
  // **** 1. setting up the component html first.  ↴
  <header
   // **** 2. setting up the css.  ↴
   // using tagged template literals
    css={css`
      // now we can write normal CSS 
      background-color: ${colors.dark};
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 0 0 5px 5px;
    `}
  >
    <Link
      css={css`
        &:hover {
          text-decoration: underline;
        }
      `}
      to="/"
    >
      Adopt Me!
    </Link>
    <span
      css={css`
        display: inline-block;
        animation: 1s ${Spin} linear infinite;
        font-size: 60px;
      `}
      aria-label="logo"
      // emoji need to have a role="img"
      role="img"
    >
      🐩
    </span>
  </header>
);

export default NavBar;

setting up VSCode for CSS in JS syntax features

Add the extension vscode-styled-components.

Add the navbar in App.js

   //****App.js****
 import NavBar from './NavBar'

 const App = () => {
  ...
  return (
  <ThemeContext.Provider value={theme}>
    <div>
    <NavBar />
    </div>
  </ThemeContext>
  )

 }