3. 使用 styled-components 给组件添加样式

安装

yarn add styled-components
# TS还需安装类型声明
yarn add @type/styled-components

样式化组件

支持类 scss 语法

import styled from 'styled-components'
const StyledHeader = styled.header`
  background: #343a40;
  padding: 14px 100px;
  display: flex;
  align-items: center;
  width: 100%;
  > img {
    height: 30px;
  }
  > nav > a {
    color: #9a9787;
    margin-left: 16px;
    padding: 0 4px;
    &:hover {
      color: #cccdb8;
    }
    &.active {
      position: relative;
      color: #cccdb8;
    }
    &.active::after {
      content: '';
      display: block;
      height: 2px;
      width: 100%;
      position: absolute;
      left: 0;
      top: 26px;
      background: #f082ac;
    }
  }
`

动画 keyframes

import styled, { keyframes } from 'styled-components'
const wave = keyframes`
  0% {width: 0; height: 0; opacity: 1;}
  100% {width: 100px; height: 100px; opacity: 0;}
`
const StyledLoading = styled.div`
  position: relative;
  margin: 100px auto;
  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #b4b8f9;
    border-radius: 50%;
    animation: ${wave} 1.5s infinite linear;
  }
  &::after {
    animation-delay: 0.75s;
  }
`
const Loading: React.FC = () => {
  return <StyledLoading />
}
export default Loading