1.组件化天下下的CSS
css的设计就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方式。
组件化中选择合适的CSS解决方案应该符合以下条件:
1.可以编写局部的css:css具备自己的局部作用域,不会随意污染其他组件内部的样式。
2.可以编写动态的css:可以获取当前组件的一些状态,根据状态的变化生成不同的css样式。
3.支持所有的css特性:伪类,动画,媒体查询等。
4.编写起来简单方便,最好符合一贯的css风格特点,
2.React中的CSS
3.react中常见的css解决方案(1) 内联样式
优点代码解析:
import React, { PureComponent } from 'react'
export default class App extends PureComponent {
constructor(props){
super(props);
this.state = {
H2Color:'blue'
}
}
render() {
const Pstyle = {
color:'blue',
textDecoration:'underline'
}
return (
<div>
<h2 style={{fontSize:'50px', color:this.state.H2Color}}>我是标题</h2>
<p style={Pstyle}>我是一段文字</p>
<button onClick={e => this.changeColor()}>修改h2color为红色</button>
</div>
)
}
changeColor(){
this.setState({
H2Color:'red'
})
}
}
4.react中常见的css解决方案(2) 普通CSS的写法
单独写一个css文件,在react组件引入
import React, { PureComponent } from 'react'
import './02.css'
export default class App extends PureComponent {
render() {
return (
<div>
<p>今天天气不错</p>
<h2>我叫康佳好</h2>
</div>
)
}
}
缺点:多个组件都写css,当元素的class名重合时,会导致css样式表层叠出现渲染问题。
5.react中常见的css解决方案(3) CSS modules
- cssmodules的使用
import React, { PureComponent } from 'react'
import AboutStyle from './style.module.css'
export default class App extends PureComponent {
render() {
return (
<div>
<h2 className={AboutStyle.title}>我是about</h2>
</div>
)
}
}
5.react中常见的css解决方案(4) CSS in JS
认识styled-components
安装依赖 styled-components : yarn add styled-components
导入依赖:
import styled from 'styled-components'
styled-components演示:
import React, { PureComponent } from 'react'
import Home from '../home'
import About from '../about'
//引入styled-components
import Styled from 'styled-components'
const HomeStyle = Styled.div`
font-size:20px;
color:red;
.title{
color:blue;
font-size:40px;
}
span{
color:black;
&.active{
color:gold;
}
/* 伪类 */
&:hover{
color:green;
}
/* 伪元素 */
&::after{
content:'aaa'
}
}
`
export default class App extends PureComponent {
render() {
return (
<HomeStyle>
<h2 className="title">我是app</h2>
<p><span className='active'>今天天气不错</span></p>
<p><span>今天天气不错</span></p>
<p><span>今天天气不错</span></p>
<p><span>今天天气不错</span></p>
{/* <Home/>
<About/> */}
</HomeStyle>
)
}
}
####### 真实开发中
- 创建一个style.js 专门用来书写样式
- 举个例子
- style.js文件
//引入styled-components
import Styled from 'styled-components'
export const HomeStyle = Styled.div`
font-size:20px;
color:red;
.title{
color:blue;
font-size:40px;
}
span{
color:black;
&.active{
color:gold;
}
/* 伪类 */
&:hover{
color:green;
}
/* 伪元素 */
&::after{
content:'aaa'
}
}
`
- index.js文件
import React, { PureComponent } from 'react'
import Home from '../home'
import About from '../about'
import {HomeStyle} from './style'
export default class App extends PureComponent {
render() {
return (
<HomeStyle>
<h2 className="title">我是app</h2>
<p><span className='active'>今天天气不错</span></p>
<p><span>今天天气不错</span></p>
<p><span>今天天气不错</span></p>
<p><span>今天天气不错</span></p>
{/* <Home/>
<About/> */}
</HomeStyle>
)
}
}
解决动态样式问题
/**
- 1.attr参数可以添加元素本身的属性
- 2.attr中可以自己设置属性
3.props 会保存HtInput身上的所有属性
*/
import Styled, { withTheme } from 'styled-components'
/**
* 1.attr参数可以添加元素本身的属性
* 2.attr中可以自己设置属性
* 3.props 会保存HtInput身上的所有属性
*/
const HyInput = Styled.input.attrs({
placeholder:'kangjiahao',
type:'password',
bfont:'30px'
})`
background-color:red;
font-size:${props => props.bfont};
color:${props => props.color}
`
export default class App extends PureComponent {
constructor(props){
super(props);
this.state = {
color:'white'
}
}
render() {
return (
<div>
用户:<HyInput color={this.state.color}/>
</div>
)
}
}
但愿平凡的每一天都能过得星光熠熠!