CSS 概述(理解)
1.组件化天下的CSS
前面说过，整个前端已经是组件化的天下:
- 而
CSS的设计就不是为组件化而生的 - 所以在目前组件化的框架中都在需要一种合适的
CSS解决方案
- 而
在组件化中选择合适的CSS解决方案应该符合以下条件：
- 可以编写局部
css：css具备自己的局部作用域，不会随意污染其他组件内的元素 - 可以编写动态的
css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式 - 支持所有的
css特性：伪类、动画、媒体查询等 - 编写起来简洁方便、最好符合一贯的
css风格特点
- 可以编写局部
2.浅谈React中的CSS
- 事实上，
css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点 在这一点上，
Vue做的要确实要好于React：Vue通过在.vue文件中编写<style><style>标签来编写自己的样式- 通过是否添加
scoped属性来决定编写的样式是全局有效还是局部有效 - 通过
lang属性来设置你喜欢的less、sass等预处理器 - 通过内联样式风格的方式来根据最新状态设置和改变
css
Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。相比而言，
React官方并没有给出在React中统一的样式风格：- 由此，从普通的
css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库 - 大家一致在寻找最好的或者说最适合自己的
CSS方案，但是到目前为止也没有统一的方案
- 由此，从普通的
React中的样式
1.内联样式
内联样式是官方推荐的一种
css样式的写法：style接受一个采用小驼峰命名属性的JavaScript对象，，而不是CSS字符串；- 并且可以引用
state中的状态来设置相关的样式；
内联样式的优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前
state中的状态
内联样式的缺点：
- 1.写法上都需要使用驼峰标识
- 2.某些样式没有提示
- 3.大量的样式, 代码混乱
- 4.某些样式无法编写(比如伪类/伪元素)
- 所以官方依然是希望内联合适和普通的
css来结合编写
2.普通的css
- 普通的
css我们通常会编写到一个单独的文件，之后再进行引入 这样的编写方式和普通的网页开发中编写方式是一致的：
- 如果我们按照普通的网页标准去编写，那么也不会有太大的问题
- 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响
- 但是普通的css都属于全局的css，样式之间会相互影响
- 这种编写方式最大的问题是样式之间会相互层叠掉
3.css modules
css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的- 如果在其他项目中使用, 那么我们需要自己来进行配置，比如配置
webpack.config.js中的modules: true等 - React的脚手架已经内置了css modules的配置：
.css/.less/.scss等样式文件都修改成.module.css/.module.less/.module.scss等- 之后就可以引用并且进行使用了
css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案
但是这种方案也有自己的缺陷：
- 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的
- 所有的
className都必须使用{style.className}的形式来编写 - 不方便动态来修改某些样式，依然需要使用内联样式的方式
- 如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用
css modules来编写，并且也是在React中很受欢迎的一种方式
4.认识 CSS in JS
实际上，官方文档也有提到过
CSS in JS这种方案：- “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义
- 注意此功能并不是 React 的一部分，而是由第三方库提供 React 对样式如何定义并没有明确态度
在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离
- 但是在前面的学习中，我们就提到过，
React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法 - 样式呢？样式也是属于
UI的一部分 - 事实上
CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态 - 所以React有被人称之为
All in JS
- 但是在前面的学习中，我们就提到过，
当然，这种开发的方式也受到了很多的批评：
5.认识styled-components
批评声音虽然有，但是在我们看来很多优秀的
CSS-in-JS的库依然非常强大、方便：- CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修 改状态等等
- 虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点
- 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案
目前比较流行的CSS-in-JS的库有哪些呢？
styled-componentsemotionglamorous
- 目前可以说
styled-components依然是社区最流行的CSS-in-JS库，所以我们以styled-components的讲解为主 - 安装
yarn add styled-components
styleld-components
1.ES6标签模板字符串
- 使用模板字符串来调用函数
如果我们在调用的时候插入其他的变量：
- 模板字符串被拆分了；
- 第一个元素是数组，是被模块字符串拆分的字符串组合；
- 后面的元素是一个个模块字符串传入的内容；
- 在
styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式的
2.styleld-components的安装和插件
styled-components的安装yarn add styled
styled-components的插件(这里只演示vscode)- 安装: 搜索
vscode-styled-components首个插件安装即可 - 作用: 用于编写
css的智能提示和语言高亮
- 安装: 搜索
3.styled的基本使用
styled-components的本质是通过函数的调用，最终创建出一个组件：
- 这个组件会被自动添加上一个不重复的 class
- styled-components会给该class添加相关的样式
另外，它支持类似于CSS预处理器一样的样式嵌套：
- 支持直接子代选择器或后代选择器，并且直接编写样式
- 可以通过
&符号获取当前元素 - 直接伪类选择器、伪元素等
4.props、attrs属性
- props可以穿透
props可以被传递给styled组件
- 获取
props需要通过${}传入一个箭头函数，props会作为该函数的参数 - 这种方式可以有效的解决动态样式的问题
- 获取
- 添加 attrs 属性
const JMInput = styled.input.attrs({
bColor: 'red'// 定义固定属性值
})`
background-color: purple;
border-color: ${props => props.bColor};/* 取出attr中定义的bColor */
color: ${props => props.color}; /* 取出proops传递的color */
`
<JMInput type="password" color={this.state.color} /><details>
<summary>图示</summary>
</details>
4.styled高级特性
支持样式的继承
- <details>
<summary>图示</summary>
</details>
const JMButton = styled.button`
font-size: 20px;
padding: 10px 12px;
margin: 10px;
`
// 继承自 JMButton 的默认样式
const JMButtonPrimary = styled(JMButton)`
color: lime;
background-color: pink;
`Theme主题共享
- <details>
<summary>图示</summary>
</details>
import styled, { ThemeProvider } from 'styled-components'
// 2.使用提供的Theme
const JMButtonPrimary = styled(JMButton)`
color: ${props => props.theme.color};
`
export default class App extends PureComponent {
render() {
return (
// 1.提供Theme
<ThemeProvider id="app" theme={{ color: 'red', fontSize: '12px' }}>
<JMButtonPrimary>Primary主要的按钮</JMButtonPrimary>
</ThemeProvider>
)
}
}classnames 库
React中添加class
- React在
JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class：
这个时候我们可以借助于一个第三方的库：
classnames- 很明显，这是一个用于动态添加
classnames的一个库
- 很明显，这是一个用于动态添加
React-Transition-Group
react-transition-group介绍
- 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验
当然，我们可以通过原生的
CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件react-addons-css-transition-group，后由社区维护，形成了现在的react-transition-group。- 这个库可以帮助我们方便的实现组件的 入场 和 离场 动画，使用时需要进行额外的安装：
npm i react-transition-group -Syarn add react-transition-group
react-transition-group本身非常小，不会为我们应用程序增加过多的负担。
react-transition-group主要组件
react-transition-group主要包含四个组件：
Transition- 该组件是一个和平台无关的组件（不一定要结合CSS）；
- 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition
CSSTransition- 在前端开发中，通常使用
CSSTransition来完成过渡动画效果
- 在前端开发中，通常使用
SwitchTransition- 两个组件显示和隐藏切换时，使用该组件
TransitionGroup- 将多个动画组件包裹在其中，一般用于列表中元素的动画
CSSTransition
CSSTransition是基于Transition组件构建的：CSSTransition执行过程中，有三个状态：appear、enter、exit
- 有三种状态, 需要定义对应的CSS样式:
| 开始状态 | 执行动画 | 执行结束 |
|---|---|---|
-appear | -appear-active | -appear-done |
-enter | -enter-active | -enter-done |
-exit | -exit-active | -enter-done |
CSSTransition组件常见对应的属性:in: 触发进入或者退出状态, 根据当前布尔值决定执行动画添加的classin为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class， 并且添加-enter-done的class- 当
in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并 且添加-enter-done的class
/* 进入 */
.card-enter,
.card-appear {
opacity: 0;
transform: scale(0.6);
}
/* 执行动画 */
.card-enter-active,
.card-appear-active {
transition: opacity 300ms, transform 300ms;
opacity: 1;
transform: scale(1);
}
.card-done,
.card-appear {
}
/* 离开 */
.card-exit {
opacity: 1;
transform: scale(1);
}
.card-exit-active {
opacity: 0;
transform: scale(0.6);
transition: opacity 300ms, transform 300ms;
}
.card-exit-done {
opacity: 0;
}
CSSTransition组件常见属性
| 属性名 | 描述 |
|---|---|
| classNames | 决定了在编写css时，对应的class名称：比如card-enter... |
| timeout | 过渡动画的时间,是控制添加class或unmountOnExit的时间 |
| appear | 是否在首次进入添加动画（需要和in同时为true）对应的calss |
| unmountOnExit | 退出后卸载组件,组件元素卸载掉 |
[其他属性可以参考官网来学习](https://reactcommunity.org/re...
)
CSSTransition组件常见的钩子函数
| 钩子函数 | 描述 |
|---|---|
| onEnter | 在进入动画之前被触发 |
| onEntering | 在应用进入动画时被触发 |
| onEntered | 在应用进入动画结束后被触发 |
| onExit | 开始退出动画触发 |
| onExiting | 正在退出退出时触发 |
| onExited | 退出完成触发 |
<details>
<summary>下拉查看</summary>
</details>
SwitchTransition
SwitchTransition可以完成两个组件之间切换的炫酷动画：- 比如我们有一个按钮需要在on和off之间切换
- 我们希望看到on先从左侧退出，off再从右侧进入
- 这个动画在
vue中被称之为vue transition modes react-transition-group中使用SwitchTransition来实现该动画
- 比如我们有一个按钮需要在on和off之间切换
SwitchTransition中主要有一个属性：mode，有两个值in-out：表示新组件先进入，旧组件再移除out-in：表示就组件先移除，新组件再进入
如何使用
SwitchTransition呢？SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性
TransitionGroup
- 当我们有一组动画时，需要将这些
CSSTransition放入到一个TransitionGroup中来完成动画：
最后
如果文章对你有帮助求个👍，最近一直在准备redux系列全面总结，这两天准备再整理整理发布，希望到时候各朋友捧个场
CSS 概述(理解)
1.组件化天下的CSS
前面说过，整个前端已经是组件化的天下:
- 而
CSS的设计就不是为组件化而生的 - 所以在目前组件化的框架中都在需要一种合适的
CSS解决方案
- 而
在组件化中选择合适的CSS解决方案应该符合以下条件：
- 可以编写局部
css：css具备自己的局部作用域，不会随意污染其他组件内的元素 - 可以编写动态的
css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式 - 支持所有的
css特性：伪类、动画、媒体查询等 - 编写起来简洁方便、最好符合一贯的
css风格特点
- 可以编写局部
2.浅谈React中的CSS
- 事实上，
css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点 在这一点上，
Vue做的要确实要好于React：Vue通过在.vue文件中编写<style><style>标签来编写自己的样式- 通过是否添加
scoped属性来决定编写的样式是全局有效还是局部有效 - 通过
lang属性来设置你喜欢的less、sass等预处理器 - 通过内联样式风格的方式来根据最新状态设置和改变
css
Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。相比而言，
React官方并没有给出在React中统一的样式风格：- 由此，从普通的
css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库 - 大家一致在寻找最好的或者说最适合自己的
CSS方案，但是到目前为止也没有统一的方案
- 由此，从普通的
React中的样式
1.内联样式
内联样式是官方推荐的一种
css样式的写法：style接受一个采用小驼峰命名属性的JavaScript对象，，而不是CSS字符串；- 并且可以引用
state中的状态来设置相关的样式；
内联样式的优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前
state中的状态
内联样式的缺点：
- 1.写法上都需要使用驼峰标识
- 2.某些样式没有提示
- 3.大量的样式, 代码混乱
- 4.某些样式无法编写(比如伪类/伪元素)
- 所以官方依然是希望内联合适和普通的
css来结合编写
2.普通的css
- 普通的
css我们通常会编写到一个单独的文件，之后再进行引入 这样的编写方式和普通的网页开发中编写方式是一致的：
- 如果我们按照普通的网页标准去编写，那么也不会有太大的问题
- 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响
- 但是普通的css都属于全局的css，样式之间会相互影响
- 这种编写方式最大的问题是样式之间会相互层叠掉
3.css modules
css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的- 如果在其他项目中使用, 那么我们需要自己来进行配置，比如配置
webpack.config.js中的modules: true等 - React的脚手架已经内置了css modules的配置：
.css/.less/.scss等样式文件都修改成.module.css/.module.less/.module.scss等- 之后就可以引用并且进行使用了
css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案
但是这种方案也有自己的缺陷：
- 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的
- 所有的
className都必须使用{style.className}的形式来编写 - 不方便动态来修改某些样式，依然需要使用内联样式的方式
- 如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用
css modules来编写，并且也是在React中很受欢迎的一种方式
4.认识 CSS in JS
实际上，官方文档也有提到过
CSS in JS这种方案：- “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义
- 注意此功能并不是 _React_ 的一部分，而是由第三方库提供 React 对样式如何定义并没有明确态度
在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离
- 但是在前面的学习中，我们就提到过，
React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法 - 样式呢？样式也是属于
UI的一部分 - 事实上
CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态 - 所以React有被人称之为
All in JS
- 但是在前面的学习中，我们就提到过，
当然，这种开发的方式也受到了很多的批评：
5.认识styled-components
批评声音虽然有，但是在我们看来很多优秀的
CSS-in-JS的库依然非常强大、方便：- CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修 改状态等等
- 虽然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点
- 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案
目前比较流行的CSS-in-JS的库有哪些呢？
styled-componentsemotionglamorous
- 目前可以说
styled-components依然是社区最流行的CSS-in-JS库，所以我们以styled-components的讲解为主 - 安装
yarn add styled-components
styleld-components
1.ES6标签模板字符串
- 使用模板字符串来调用函数
如果我们在调用的时候插入其他的变量：
- 模板字符串被拆分了；
- 第一个元素是数组，是被模块字符串拆分的字符串组合；
- 后面的元素是一个个模块字符串传入的内容；
- 在
styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式的
2.styleld-components的安装和插件
styled-components的安装yarn add styled
styled-components的插件(这里只演示vscode)- 安装: 搜索
vscode-styled-components首个插件安装即可 - 作用: 用于编写
css的智能提示和语言高亮
- 安装: 搜索
3.styled的基本使用
styled-components的本质是通过函数的调用，最终创建出一个组件：
- 这个组件会被自动添加上一个不重复的 class
- styled-components会给该class添加相关的样式
另外，它支持类似于CSS预处理器一样的样式嵌套：
- 支持直接子代选择器或后代选择器，并且直接编写样式
- 可以通过
&符号获取当前元素 - 直接伪类选择器、伪元素等
4.props、attrs属性
- props可以穿透
props可以被传递给styled组件
- 获取
props需要通过${}传入一个箭头函数，props会作为该函数的参数 - 这种方式可以有效的解决动态样式的问题
- 获取
- 添加 attrs 属性
const JMInput = styled.input.attrs({
bColor: 'red'// 定义固定属性值
})`
background-color: purple;
border-color: ${props => props.bColor};/ 取出attr中定义的bColor /
color: ${props => props.color}; / 取出proops传递的color /
`
<JMInput type="password" color={this.state.color} />
图示
4.styled高级特性
支持样式的继承
图示
const JMButton = styled.button`
font-size: 20px;
padding: 10px 12px;
margin: 10px;
`
// 继承自 JMButton 的默认样式
const JMButtonPrimary = styled(JMButton)`
color: lime;
background-color: pink;
`
Theme主题共享
图示
import styled, { ThemeProvider } from 'styled-components'
// 2.使用提供的Theme
const JMButtonPrimary = styled(JMButton)`
color: ${props => props.theme.color};
`
export default class App extends PureComponent {
render() {
return (
// 1.提供Theme
<ThemeProvider id="app" theme={{ color: 'red', fontSize: '12px' }}>
<JMButtonPrimary>Primary主要的按钮</JMButtonPrimary>
</ThemeProvider>
)
}
}
classnames 库
React中添加class
- React在
JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class：
这个时候我们可以借助于一个第三方的库：
classnames- 很明显，这是一个用于动态添加
classnames的一个库
- 很明显，这是一个用于动态添加
React-Transition-Group
react-transition-group介绍
- 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验
当然，我们可以通过原生的
CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件react-addons-css-transition-group，后由社区维护，形成了现在的react-transition-group。- 这个库可以帮助我们方便的实现组件的 入场 和 离场 动画，使用时需要进行额外的安装：
npm i react-transition-group -Syarn add react-transition-group
react-transition-group本身非常小，不会为我们应用程序增加过多的负担。
react-transition-group主要组件
react-transition-group主要包含四个组件：
Transition- 该组件是一个和平台无关的组件（不一定要结合CSS）；
- 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition
CSSTransition- 在前端开发中，通常使用
CSSTransition来完成过渡动画效果
- 在前端开发中，通常使用
SwitchTransition- 两个组件显示和隐藏切换时，使用该组件
TransitionGroup- 将多个动画组件包裹在其中，一般用于列表中元素的动画
CSSTransition
CSSTransition是基于Transition组件构建的：CSSTransition执行过程中，有三个状态：appear、enter、exit
- 有三种状态, 需要定义对应的CSS样式:
开始状态
执行动画
执行结束
-appear
-appear-active
-appear-done
-enter
-enter-active
-enter-done
-exit
-exit-active
-enter-done
CSSTransition组件常见对应的属性:in: 触发进入或者退出状态, 根据当前布尔值决定执行动画添加的classin为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class， 并且添加-enter-done的class- 当
in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并 且添加-enter-done的class
/ 进入 /
.card-enter,
.card-appear {
opacity: 0;
transform: scale(0.6);
}
/ 执行动画 /
.card-enter-active,
.card-appear-active {
transition: opacity 300ms, transform 300ms;
opacity: 1;
transform: scale(1);
}
.card-done,
.card-appear {
}
/ 离开 /
.card-exit {
opacity: 1;
transform: scale(1);
}
.card-exit-active {
opacity: 0;
transform: scale(0.6);
transition: opacity 300ms, transform 300ms;
}
.card-exit-done {
opacity: 0;
}
CSSTransition组件常见属性
属性名
描述
classNames
决定了在编写css时，对应的class名称：比如card-enter...
timeout
过渡动画的时间,是控制添加class或unmountOnExit的时间
appear
是否在首次进入添加动画（需要和in同时为true）对应的calss
unmountOnExit
退出后卸载组件,组件元素卸载掉
CSSTransition组件常见的钩子函数
钩子函数
描述
onEnter
在进入动画之前被触发
onEntering
在应用进入动画时被触发
onEntered
在应用进入动画结束后被触发
onExit
开始退出动画触发
onExiting
正在退出退出时触发
onExited
退出完成触发
下拉查看
SwitchTransition
SwitchTransition可以完成两个组件之间切换的炫酷动画：- 比如我们有一个按钮需要在on和off之间切换
- 我们希望看到on先从左侧退出，off再从右侧进入
- 这个动画在
vue中被称之为vue transition modes react-transition-group中使用SwitchTransition来实现该动画
- 比如我们有一个按钮需要在on和off之间切换
SwitchTransition中主要有一个属性：mode，有两个值in-out：表示新组件先进入，旧组件再移除out-in：表示就组件先移除，新组件再进入
如何使用
SwitchTransition呢？SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性
TransitionGroup
- 当我们有一组动画时，需要将这些
CSSTransition放入到一个TransitionGroup中来完成动画：
最后
如果文章对你有帮助求个👍，最近一直在准备redux系列全面总结，这两天准备再整理整理发布，希望到时候各朋友捧个场
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。