一、是什么
组件式开发选择合适的css解决方案尤为重要
通常会遵循以下规则：
- 可以编写局部css，不会随意污染其他组件内的原生；
- 可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；
- 支持所有的css特性：伪类、动画、媒体查询等；
- 编写起来简洁方便、最好符合一贯的css风格特点
在这一方面，vue使用css起来更为简洁：
而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊
二、方式
常见的CSS引入方式有以下：
在组件内直接使用
直接在组件中书写css样式，通过style属性直接引入，如下：
import React, { Component } from "react";
const div1 = {
width: "300px",
margin: "30px auto",
backgroundColor: "#44014C", //驼峰法
minHeight: "200px",
BoxSizing: "border-Box"
};
class Test extends Component {
constructor(props, context) {
super(props);
}
render() {
return (
<div>
<div style={div1}>123</div>
<div style={{backgroundColor:"red"}}>
</div>
);
}
}
export default Test;
上面可以看到，css属性需要转换成驼峰写法
这种方式优点：
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state中的状态
缺点：
组件中引入css文件
App.css文件：
.title {
color: red;
font-size: 20px;
}
.desc {
color: green;
text-decoration: underline;
}
组件中引入：
import React, { PureComponent } from 'react';
import Home from './Home';
import './App.css';
export default class App extends PureComponent {
render() {
return (
<div className="app">
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p>
<Home/>
</div>
)
}
}
这种方式存在不好的地方在于样式是全局生效，样式之间会互相影响
组件中引入 .module.css 文件
将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。不会影响当前组件的后代组件
这种方式是webpack特工的方案，只需要配置webpack配置文件中modules:true即可
import React, { PureComponent } from 'react';
import Home from './Home';
import './App.module.css';
export default class App extends PureComponent {
render() {
return (
<div className="app">
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p>
<Home/>
</div>
)
}
}
这种方式能够解决局部作用域问题，但也有一定的缺陷：
- 引用的类名，不能使用连接符(.xxx-xx)，在 JavaScript 中是不识别的
- 所有的 className 都必须使用 {style.className} 的形式来编写
- 不方便动态来修改某些样式，依然需要使用内联样式的方式；
CSS in JS
css-in-JS， 是指一种模式，其中CSS由 JavaScript生成而不是在外部文件中定义
此功能并不是 React 的一部分，而是由第三方库提供，例如：
- styled-components
- emotion
- glamorous
下面主要看看styled-components的基本使用
基本使用如下：
export const SelfLink = styled.div`
height: 50px;
border: 1px solid red;
color: yellow;
`;
export const SelfButton = styled.div`
height: 150px;
width: 150px;
color: ${props => props.color};
background-image: url(${props => props.src});
background-size: 150px 150px;
;
引入样式组件也很简单：
import React, { Component } from "react";
import { SelfLink, SelfButton } from "./style";
class Test extends Component {
constructor(props, context) {
super(props);
}
render() {
return (
<div>
<SelfLink title="People's Republic of China">app.js</SelfLink>
<SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
SelfButton
</SelfButton>
</div>
);
}
}
export default Test;
三、区别
通过上面四种样式的引入，可以看到：
-
组件中引入 .css 文件符合我们日常的编写习惯，但是作用域是全局的，样式之间会层叠
至于使用react用哪种方案引入css，并没有一个绝对的答案，可以根据各自情况选择合适的方案
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
