【Day14】样式 Style

CSS in React

以下纪录在 React 中撰写 CSS 的几种方法。

内联样式／行内样式（inline style）

style 属性内容除了传统 HTML 的字串写法外，
可以传入一个定义了 style 内容的 JavaScript object。

property 要改成 camelCase 写法，
与 DOM style JavaScript property 写法一致，
这样效率更高，并可防止 XSS 安全漏洞。

除了 zoom、zIndex 等没有单位的属性外，
React 会替 value 为 number 的属性自动加上 px，
如要指定其他单位，可以 string 来撰写，
浏览器引擎前缀除了 ms 外皆以大写字母开头
例如 WebkitTransition。

行内样式范例：

<App>
	<input type="text" style={{ 
		baclgroungColor:"#f66",
		fontSize: 15,
		height: '10%' 
	}} />
</App>

内部样式

在文件内建立一个样式物件，
然後使用 inline style 写法引入该物件

import React from 'react';

class Page extends React.Component{
	render(){
		let mystyle={
			width:'200px',
			height:'80px',
			backgroundColor:'yellow',
			fontSize:'24px',
			textAlign:'center'
		}
		return(
			<div style={mystyle}>This is Page1!</div>
		);
	}
}

export default Page;

外部样式表（External style sheet）

引入外部 css文档後，
即可直接加上 class 属性来套用 css

import './style.css';

const App = () =>{
  return (
    <div className="wrap"> // 套用 style.css 中 .wrap 所定义的样式
      我是网页内容
    </div>
  )
}

在 React 中，使用 CSS class
通常比 inline style 效能更好，
style 属性一般则被用作增加动态 style 的方式。

CSS 处理方案

以下为可搭配 React 使用的 CSS 处理方案

css-in-js：用 JavaScript 来写 CSS
- style-component（推荐）
postcss：使用 JavaScript 转换 CSS
- autoprefixer（自动加入属性浏览器前缀）
- cssnext
- postcss-modules
sass
- Creat React App 支持（但要另行安装 sass）

其他

classnames：辅助搭配，方便动态套用多个 class

css-module

可以随意命名 class，由套件协助处理
不用担心会重复或污染全局

文件以[name].module.scss的方式命名
以变数形式导入
import myStyle from './mystyle.module.scss'
以变数引用的方式添加
className = { myStyle.title }
默认使用hash命名class，非hash用法：
:global(.wrap){ color: green; background: red; }
class组合：一个css可以继承另一个css的样式
- 同一文件内继承
  className { color:green; background: red; } .otherClassName { compose: className; color: yellow; }
- 不同文件内继承
  .otherClassName { compose: className from './another.css'; color: yellow; }
- 可使用变数（要安装PostCSS）

css-module 和 sass 结合使用

css-module：不支持嵌套写法
sass：不支持杂凑（hash）命名

postcss

常用插件：

AutoPrefixer（CRA 默认支持）
postcss-cssnext：可使用未来css语法（css4语法，比如:root{ --mainColor: #ffc001; }）
cssnano：压缩用，压缩率多可达到50%
postcss-sprites：将引用的多张图片自动生成雪碧图的插件

CRACO

React 预设不可拓展 webpack、babel 等套件，
使用 CRACO 即可自订这些套件

css-in-js

用 JavaScript 来写 CSS

style-component

style-component 官网

使用方法：

style(Component)`
  .styled-common-modal {
    background: rgba(0,0,0,0.5) !important;
  }
`

ES6 标签模板语法：

	const Title = styled.myH1`
		font-size: 1.5em;
		text-align: center;
		color: palevioletred;
	`
	<App>
		<Title>我是标题，自带样式</Title>
	</App>

CSS 嵌套语法：

	const Title = styled.h1`
		font-size: 1.5em;
		text-align: center;
		> h2 {
			color: palevioletred;
		}
		> .content{
			width: 100%;
			height: 200px;
		}
	`

拓展 css-component：

	const Title = styled.h1`
		font-size: 1.5em;
		text-align: center;
		color: palevioletred;
	`
	
	const ExtendTitle = styled(Title)`
		font-size: 1.8em;
		backgroung-color: gray;
	`

拓展 component 的 css：

	const Link = ({ className, children }) => {
	<a className={className}>
		{children}
	</a>
	}
	const StyledLink = styled(Link)`
		color: palevioletred;
		font-weight: bold;
	`