以下方式仅供参考,适合自己项目的才是最好的!!
一、行内样式使用
import React from 'react'
class Home extends React.Component {
render() {
return (
<div>
<h3 style={{fontColor: 'green',marginTop:'5px'}}>标题</h3>
</div>) }
}
export default Home
注意点:
A、样式的书写连接需使用驼峰命名规则;
B、大括号,外面大括号是由于React的JSX风格需由大括号进行包裹,里面的大括号创建了一个CSS的对象;
优点:
1、书写快速;
2、局部作用域,推荐组件只用一次的类似活动页面的开发;
缺点:
1、不利于维护css;
2、增大组件复杂度;
3、可阅读性差;
4、代码量多;
二、声明样式使用
import React from 'react'
class Home extends React.Component {
render() {
const title = {
fontColor: 'green',
marginTop: '5px'
}
return (
<div>
<h3 style={tilte}>标题</h3>
</div>) }
}
export default Home
原理和行内一毛一样,只不过将样式对象抽出来在外部声明了而已。
优点:
1、html框架与样式分离;
2、同上,这种也比较适用于短周期使用的组件界面;
缺点:
1、影响其他组件同名样式,容易导致样式混乱,全局作用域;
2、代码规范性;
三、外部引入Home.css
import React from 'react';
import './Home.css';
class Home extends React.Component {
render() {
return (
<div>
<h3 className="title">标题</h3>
</div>) }
}
export default Home
.title = {
fontColor: 'green',
marginTop: '5px'
}
优点:
1、样式与界面分离,利于维护;
2、适用于系统UI风格基本奠定的应用,无大的变化,可抽取为公共样式,如common.css;
3、css代码量少;
缺点:
1、作用域为全局;
2、应用UI风格百变或者不确定的不建议使用;
四、CSS Modules
demo可参考阮一峰的demo:https://github.com/ruanyf/css-modules-demos 介绍很详细,里面有css局部作用域、全局作用域、添加hash值等用法;
注意点:
A、需要安装CSS Modules;
B、webpack配置loaders;
优点:
1、灵活书写局部、全局作用域样式;
2、配置开启modules,渲染唯一hash样式,避免全局污染;
3、推荐技术栈成熟,约定俗成的团队应用开发;
缺点:
1、协作开发需制定并遵守开发公约,避免样式标记global混乱;
五、style Component
一切皆可成组件,css也不外如是,原理是:在定义组件的时候直接附上组件样式,需安装依赖插件,
npm install --save styled-components
import React from 'react';
class Home extends React.Component {
const Title = styled.h3`
margin-top: 5px;
font-color: green;
`;
render() {
return (
<div>
<Title>标题</Title>
</div>) }
}
export default Home
当然style component(Title)也可以放到外部建.js文件做import { Title } from "./style.js";
优点:
1、符合React思想,一切皆为组件,js、html、css三大巨头;
2、算是比较新的技术;
缺点:
1、需要一定的开发习惯培养;
2、嵌套组件样式的开发比较困难;
3、改动不是那么的灵活,容易重复造轮子;
六、Radium
优雅处理变量、媒体查询、伪类等,并且可以直接使用js中的数学,连接,正则表达式,条件,函数等,同样先安装 npm install radium --save-dev 再引入import radium from 'radium'进行包裹使用;
import React from "react";
import Radium from 'radium';
let styles = {
title: {
color: 'green',
marginTop: '5px'
':hover': {
fontColor: '16px'
}
},
info: {
color: '#666'
}
};
class Home extends Component {
render() {
return (
<div>
<h3 style={[ styles.title, styles.info ]}>
标题
</h3>
</div>
);
}
}
export default Radium(Home);
优点:
1、处理各种类型样式,变量、媒体查询、伪类等,并且可以直接使用js中的数学,连接,正则表达式,条件,函数等;
缺点:
1、全局作用域;
2、export之前Radium需包裹一层;
以上纯属个人见解,欢迎交流纠正,谢谢