styled-components: all in js

styled-components 是一个给 React 量身定制的一个库，奉行 React 中 all in js 的设计理念，并发挥到极致，让 CSS 也能称为一个个 JS 模块。

使用 styled-components 解决了哪些痛点？

CSS 模块化

尽量降低模块之间的耦合度，利于项目的进一步维护

支持预处理器嵌套语法

可以采用 sass、less 的嵌套语法

export const SearchWrapper = styled.div`
    position: relative;
    float: left;
    .zoom {
        right: 5px;
        &.focused {
            background: #777;
            color: #fff;
        }
    }
`;

让 CSS 代码能够处理逻辑

不仅仅是因为里面的模板字符串可以写 JS 表达式，更重要的是能够拿到组件的上下文信息 state、props

比如：在 React 组件中的 JSX 代码中写了这样一段：

<RecommendItem imgUrl={'xxx'}/>

在相应的 style.js 中就能够接受相应的参数：

export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background: url(${(props) => props.imgUrl});
    background-size: contain;
`

语义化

前端开发者的毒药，致命一击

// index.jsx
<HeaderWrapper>
    <Logo/>
    <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载App</NavItem>
        <NavItem className='right'>
            <i className="iconfont">&#xe636;</i>
        </NavItem>
        <SearchWrapper>
            <NavSearch></NavSearch>
            <i className='iconfont'>&#xe614;</i>
        </SearchWrapper>
    </Nav>
    <Addition>
        <Button className='writting'>
          <i className="iconfont">&#xe615;</i>
          来参加
        </Button>
        <Button className='reg'>注册</Button>
    </Addition>
</HeaderWrapper>

//index.js
import styled from 'styled-components';

export const HeaderWrapper = styled.div`
    z-index: 1;
    position: relative;
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
`;

export const Logo = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 56px;
    background: url(${logoPic});
    background-size: contain;
`;

export const Nav = styled.div`
    width: 960px;
    height: 100%;
    padding-right: 70px;
    box-sizing: border-box;
    margin: 0 auto;
`;
//......

可以发现，拆分后的标签基本是在 style.js 里面导出的变量名，完全自定义，这个时候 CSS 都成为了一个个 JS 模块，每个模块相当于一个标签

如：styled.div 已经帮我们创建好了标签

在模块下面完全可以再写 h5 标签，开发方式更灵活

使用方法

基本知识

高级用法

API

开发踩的坑以及目前的缺点

• 坑：以前的 injectGlobal 已经被弃用，对于全局样式文件需要使用 createGlobalStyle 来进行引入

//iconfont.js
//全局样式同理
import {createGlobalStyle} from 'styled-components'

export const IconStyle = createGlobalStyle`
@font-face {
  font-family: "iconfont";
  src: url('./iconfont.eot?t=1561883078042'); /* IE9 */
  src: url('./iconfont.eot?t=1561883078042#iefix') format('embedded-opentype'), /* IE6-IE8 
  //...
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
`

然后在全局的根组件 APP.js 里面：

import { IconStyle } from './statics/iconfont/iconfont'
import { GlobalStyle } from  './style'
//import ...

function App() {
  return (
    <Provider store={store}>
      <div>
        {/* 通过标签形式引入这些样式 */}
        <GlobalStyle></GlobalStyle>
        <IconStyle></IconStyle>
        <Header />
        <BrowserRouter>
        <div>
          <Route path='/' exact component={Home}></Route>
          <Route path='/detail' exact component={Detail}></Route>
        </div>
        </BrowserRouter>
      </div>
    </Provider>
  );
}

export default App;