1、CSS样式
一、内联样式
内联样式是官方推荐的一种css样式的写法:
- style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串;
- 并且可以引用state中的状态来设置相关的样式;
内联样式的优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state中的状态
内联样式的缺点:
- 1.写法上都需要使用驼峰标识
- 2.某些样式没有提示
- 3.大量的样式, 代码混乱
- 4.某些样式无法编写(比如伪类/伪元素)
二、普通的css
- 普通的css我们通常会编写到一个单独的文件，之后再进行引入。
- 这样的编写方式和普通的网页开发中编写方式是一致
- 这种编写方式最大的问题是样式之间会相互层叠掉;
// style.css
#app > .title { // app 下的title className
color: red;
}
三、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确实解决了局部作用域的问题
-
但是这种方案也有自己的缺陷:
- 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的;
- 所有的className都必须使用{style.className} 的形式来编写;
- 不方便动态来修改某些样式，依然需要使用内联样式的方式;
// styled.module.css
.title {
font-size: 30px;
color: blue;
}
.banner {
color: orange;
}
四、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;
2、styled-components
CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修
改状态等等;
依然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点;
所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案;
- 目前比较流行的CSS-in-JS的库有，styled-components、emotion、glamorous
- 前可以说styled-components依然是社区最流行的CSS-in-JS库
- 安装styled-components：
yarn add styled-components
1、styled的样式继承关系
import React, { PureComponent } from 'react'
import Profile from '../profile'
import Home from '../home'
import styled, {ThemeProvider} from 'styled-components'
const HYButton = styled.button`
padding: 10px 20px;
color: red;
`
const HYPrimaryButton = styled(HYButton)`
font-size: 10;
`
export default class App extends PureComponent {
render() {
return (
<ThemeProvider id="app" theme={{themeColor: "green", fontSize: "30px"}}>
<Home />
<Profile />
<HYButton>我是一个普通的按钮</HYButton>
<HYPrimaryButton>我我一个高级按钮</HYPrimaryButton>
</ThemeProvider>
)
}
}
2、styled元素中的不同状态
// style.js
import styled from 'styled-components'
// span 的状态为active hover after,写法加&
// 可以给尾内和尾部添加元素:: aaa
export const HomeWrapper = styled.div`
font-size: 50px;
color: red;
.banner {
background-color: blue;
span {
color: #fff;
&.active {
color: #f00;
}
&:hover {
color: green;
}
&::after {
content: "aaa";
}
}
}
`
// ThemeProvider属性获取
export const TitleWrapper = styled.h2`
text-decoration: underline;
font-size: ${props => props.theme.fontSize};
color: ${props => props.theme.themeColor};
`
// index.js
import React, { PureComponent } from 'react'
import {HomeWrapper, TitleWrapper} from './style'
export default class Home extends PureComponent {
render() {
return (
<HomeWrapper >
<TitleWrapper >我是Home的标题</TitleWrapper>
<div className="banner">
<span className="active">轮播图1</span>
<span>轮播图2</span>
<span>轮播图3</span>
</div>
</HomeWrapper>
)
}
}
3、props传递属性
import React, { PureComponent } from 'react'
import styled from 'styled-components'
import sytled from 'styled-components'
/** 标签模板字符串
* 1、props穿透
* 2、attrs的使用
* 3、传入state作为props属性
*/
const HYInput = styled.input.attrs({
placeholder: "coderwhy",
bColor: "yellow" // 设置bColor变量
})`
background-color: green;
border-color: ${props => props.bColor};
color: ${props => props.color};
`
export default class Profile extends PureComponent {
constructor(props) {
super(props);
this.state = {
color: "yellow"
}
}
render() {
return (
<div >
<input type={"password"}></input>
<HYInput type={"text"} color={this.state.color}></HYInput>
<h2 >我是Profile的标题</h2>
<ul >
<li>设置列表1</li>
<li>设置列表2</li>
<li>设置列表3</li>
<li>设置列表4</li>
</ul>
</div>
)
}
}
