卡比图床项目——styled-components样式管理

引入styled-components

上节搭建好了页面的基本结构，现在可以引入styled-components进行组件的样式管理。

运行yarn add styled-components安装

具体使用：比如我要对header标签进行样式添加，那么

const Header = styled.header`
样式内容
`

这样写即可，会返回一个新的标签叫做Header对header进行替换即可。

同理对logo也进行改写

修改完Header的颜色发现颜色并没有生效，因为里面的内容是链接。链接已经是组件了，一种简单的方式是直接在标签里面加上style或者加上className再引入样式。这里我们依然选择使用styled-components

这里用函数的形式进行传输

如果想实现导航栏选中有效果的话一种办法是使用js，另一种是把Link换成NavLink，自带一个activeClassName，会给他带一个active的类，然后去设置。

const StyledLink = styled(NavLink)`
  color: #fff;
  margin-left: 30px;
  &.active {
    border-bottom: 1px solid #ccc;
  }
`

完善细节，完成基本页面样式