大纲

CSS模块化大纲 (opens new window) 密码：9758

CSS in JS

形式：

import React from 'react';

// 将原来的 css 写成了对象，如果放到单独的文件就是 .js 文件
const style = {
	color: 'red',
	background: 'blue'
};

export default () => {
	return <span style={style}>hello world</span>;
};

三方库 style-components

style-components 官网 (opens new window)

css in js playground (opens new window)

安装

npm install --save styled-components

简单使用：

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
	color: red;
`;

export default () => {
	return <Title>hello</Title>;
};

运行效果：