4.7 CSS-in-JS允许直接在JavaScript中编写CSS

一、CSS-in-JS允许直接在JavaScript中编写CSS

1. CSS-in-JS解决方案提供了新的编写CSS的方式，这些方案以用JavaScript为基础的API来创建和编写样式

2. 好处：动态样式，元素作用域，自定义主题，支持SSR， 方便单元测试等

3. css in js library：Styled-components、Linaria...

4. 下载工具：npm install styled-components

5. 简单使用：

   import styled from 'styled-components'
   
   const Div = styled.div`
     width: 200px;
     height: 200px;
     background: blue;
   `
   
   const Link = styled.a`
     text-decoration: underline;
     color: green;
     // hover必须加&符，不然给子标签加了
     &:hover {
       color: yellow;
     }
   `
   
   function App() {
     return (
       <>
         <div>Default Template</div>
         <Div></Div>
         <Link href="http://www.baidu.com">这是链接</Link>
       </>
     )
   }
   
   export default App
   

   编写的样式可以直接设置成标签，同时子组件的传值，样式父组件也可以接收