重置样式

创建index.scss文件，
在index.scss文件中重置样式
在index.tsx中引入index.scss
juejin.cn/post/711347…
重要的几点

@import-normalize;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::after,
*::before {
  box-sizing: border-box;
}
ul,ol {
  list-style: none;
}

导航栏

就是flex布局，没什么特别要注意的
比如给导航栏加样式

const Nav = styled.nav`
  border: 1px solid red;
  >ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    >li{
      padding: 16px;
      flex-grow: 1; // flex布局占比放大
      text-align: center; // 文字居中
    }
  }
`;
<Nav>
    <ul>
        <li><Link to="/tags">标签页</Link></li>
        <li><Link to="/money">记账页</Link></li>
        <li><Link to="/statistics">统计页</Link></li>
    </ul>
</Nav>

字体

搜索 "中文字体 css github"
github.com/zenozeng/fo…

// 这是scss中变量的使用
$font-hei:  -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
……
body{
  font-family:$font-hei;
}

一行太长，可以在webstorm搜索自动换行工具，换行（双击shift，搜wrap）

其他

• line-height ， 行号，默认情况下等于fontsize + 行距
• box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); // 给某一快区域加上阴影效果
• flex-grow: 1; // flex布局占比放大
• text-align: center; // 文字居中