另一方面，了解CSS in JS，实际上，官方文档也提到过CSS in JS这个方案：
https://zh-幸福等大碗. react js.org/docs/FAQ-styling.html
CSS-in-JS是指由JavaScript而不是外部文件生成CSS的模式。 请注意，此功能由第三方库提供，而不是React的一部分。 React对如何定义风格没有明确的态度； 传统的前端开发通常分离结构(HTML )、样式(逻辑)和JavaScript )。
但是，如在以前的学习中所述，由于React的思想被认为不能分离逻辑本身和UI，所以有JSX的语法。 你有什么风格？ 样式也是UI的一部分； 实际上，CSS-in-JS模式是一种将样式(CSS )也写入JavaScript的方式，可以方便地使用JavaScript。 所以React中有一种叫All in JS的东西；
当然，这种开发方式也受到了很多批评：
stopusingcssinjavascriptforwebdevelopment 3359 hacker noon.com/stop-using-CSS-in-JavaScript-for-we B- development
CSS-in-JS通过JavaScript为CSS提供一些功能，包括嵌套样式、函数定义、逻辑复用和动态状态更改，如CSS预处理器。 虽然CSS预处理器仍然有一些能力，但获取动态状态仍然是一个难以处理的问题。 因此，目前CSS-in-JS可以说是React创建CSS的最受欢迎的解决方案。 现在流行的CSS-in-JS的库是什么？1. styled-components
2 .事件
3. glamorous
目前，styled-components仍然是社区中最受欢迎的CSS-in-JS库。
所以我们以styled-components的讲座为中心：
安装样式组件：
在yarn add styled-components三、ES6标签模板字符串ES6中添加了模板字符串语法。 这被很多人使用。 但是，模板字符串还有另一种用法。 标签模板字符串(Tagged Template Literals )。
让我们看看常见的JavaScript函数：
通常，我们用函数名()的方式进行调用
其实函数还有另一种调用方法：
如果在调用时插入了另一个变量：
模板字符串已分割； 第一个元素是数组，是由模块字符串分割的字符串组合。 以下元素是传递模块字符串的内容。 在styled component中，这样分析模块字符串，最终生成我们想要的样式
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title title/title/headbodyscriptconstname=' zep ' con stage=1110
此组件将自动添加到上一个不重复的类中； 样式组件添加与类相关的样式； 它还支持嵌套样式，如CSS预处理器。
支持直接子选择器或后代选择器，直接描述样式； 可以从符号中获取当前元素； 直接伪类选择器、伪元素等；
导入react，{PureComponent} from 'react '； importstyledfrom ' styled-components ' consthomewrapper=styled.div ` font-size 336030 px； color :天空蓝； banner { background-color : darkolivegreen； span { display: flex； flex-wrap: wrap；
color: #fff; &.active { color: #f90; } &:hover { color: pink; } &::after { content: 'aaa'; } } }`const TitleWrapper = styled.h2` text-decoration: underline; font-size: 18px;`class App extends PureComponent { render() { return ( <HomeWrapper> <TitleWrapper>我是home的标题</TitleWrapper> <div className='banner'> <span>轮播图1</span> <span className='active'>轮播图2</span> <span>轮播图3</span> <span>轮播图4</span> </div> </HomeWrapper> ); }}export default App;在实际项目中的写法：
2. props可以被传递给styled组件
import React, {PureComponent} from 'react';import styled from 'styled-components'const HYInput = styled.input.attrs({ placeholder: 'zep', bColor: 'red'})` background-color: lightblue; border-color: ${props => props.bColor}; color: ${props => props.color}`class App extends PureComponent { constructor(props) { super(props); this.state = { color: 'blue' } } render() { return ( <div className="profile"> <input type="password"/> <HYInput type="text" color={this.state.color}/> <h2>我是profile的标题</h2> <ul className="settings"> <li>设置列表1</li> <li>设置列表2</li> <li>设置列表3</li> </ul> </div> ); }}export default App; 六、styled高级特性 支持样式的继承
styled设置主题
import React, {PureComponent} from 'react';import Home from '../home'import Profile from '../profile'import styled, {ThemeProvider} from "styled-components";const HYButton = styled.button` padding: 10px 20px; color: red; border-color: red;`// 继承样式const HYPrimaryButton = styled(HYButton)` //padding: 10px 20px; //border-color: red; color: #fff; background-color: green;`/*const HYPrimaryButton = styled.button` padding: 10px 20px; border-color: red; color: #fff; background-color: green;`*/class App extends PureComponent { render() { return ( <ThemeProvider id="app" theme={{themeColor: 'yellow', fontSize: '30px'}}> <div>app</div> <hr /> <Home /> <hr /> <Profile /> <HYButton>我是普通的按钮</HYButton> <HYPrimaryButton>我是primary的按钮</HYPrimaryButton> </ThemeProvider> ); }}export default App; import styled from "styled-components";export const HomeWrapper = styled.div` font-size: 30px; color: skyblue; .banner { background-color: darkolivegreen; span { display: flex; flex-wrap: wrap; color: #fff; &.active { color: #f90; } &:hover { color: pink; } &::after { content: 'aaa'; } } }`export const TitleWrapper = styled.h2` text-decoration: underline; font-size: 18px; color: ${props => props.theme.themeColor};`