一、關(guān)于css-in-js的認(rèn)識

1、css-in-js是一種使用 js 編寫 css 樣式的 css 處理方案。它的實(shí)現(xiàn)方案有很多，比如styled-components、polished、glamorous(paypal 開源的，不再維護(hù))、radium、emotion等等。

2、其中最成熟的便是styled-components和emotion。它們真正意義上實(shí)現(xiàn)了組件化style，可以說是專門為 react 打造的。

二、styled-components 簡介

styled-components是 css-in-js 主流的實(shí)現(xiàn)方案，同時也是組件化style的主流實(shí)現(xiàn)方案。

下面是styled-components的一些特性：

1、唯一class類名：和 css-module 異曲同工，生成唯一類名，避免重復(fù)和全局污染，也不需要你費(fèi)腦筋思考該如何命名。

2、無冗余css代碼：它的樣式和組件綁定，組件調(diào)用則樣式起作用。意味著你不需要關(guān)心如何檢測和刪除那些未使用的 css 代碼。

3、動態(tài)樣式： 它可以很簡單地調(diào)整和拓展組件的樣式，而不需要建立很多個 class 類來維護(hù)組件的樣式。

4、自動添加兼容前綴：和 Autoprefixer 類似，會自動添加瀏覽器兼容前綴以支持舊版瀏覽器。

5、支持變量和繼承：你可以使用變量來設(shè)置不同的樣式，使用這些不同樣式時只需要給樣式組件傳遞一個參數(shù)即可。

三、styled-components使用方式

1、安裝

npm install styled-components

2、使用

styled-components主要基于 es6 的標(biāo)簽?zāi)０逭Z法調(diào)用標(biāo)簽函數(shù)

import React, { Component } from 'react'import styled from 'styled-components'export default class Style extends Component { render() {  return (   <>    <div>     <Title>我是標(biāo)題</Title>    </div>   </>  ) }}// 使用es6的模板字符串的方式(下面表示定義了h1的樣式)const Title = styled.h1` font-size: 20px; color: #f00;

3、嵌套的使用

import React, { Component } from 'react'import styled from 'styled-components'export default class Style extends Component { render() {  return (   <>    <div>     <Content>      <h2>你好</h2>      <div className="content">我是內(nèi)容</div>     </Content>    </div>   </>  ) }}const Content = styled.div` width: 100%; height: 500px; border: 1px solid #f00; > h2 {  color: pink; } > .content {  text-align: center;  color: #f00; }`

4、使用props傳遞參數(shù)的方式

import React, { Component } from 'react'import styled, { css } from 'styled-components'export default class Style2 extends Component { render() {  return (   <div>    <Button> 提交 </Button>    <Button primary> 提交 </Button>   </div>  ) }}const Button = styled.button` font-size: 1em; margin: 1em; padding: 0.25em 1em; border-radius: 5px; color: palevioletred; border: 2px solid palevioletred; cursor: pointer; ${props =>  props.primary &&  css`   border: 2px solid mediumseagreen;   color: mediumseagreen;  `}`