作用

• 用组件的形式编写样式

  使用

• 将 html 标签和样式放在一起 ```javascript yarn add styled-components // 安装 yarn add @types/styled-components // TS 类型声明文件

import styled from ‘styled-components’ // 引入 // 模板字符串形式 const Title = styled.h1// 将标签和样式绑定 font-size: 1.5em; text-align: center; color: palevioletred;; // 对象形式 const Title = styled.h1({ font-size: 1.5em, text-align: center, color: palevioletred, });

const Wrapper = styled.sectionpadding: 4em; background: papayawhip;;

// 使用 跟组件相同

<a name="fSZlU"></a>
### 组件样式
```javascript
import {NavLink} from 'react-router-dom'  // NavLink 组件  
const StyledLink = styled(NavLink)`       // 函数形式
  color: #fff;
  margin-left: 30px;
  &.active {
    border-bottom: 1px solid #fff;
  }
`;
<StyledLink to="/" activeClassName="active" exact>首页</StyledLink>