styled-components 教程：CSS in JS 最佳实践与 React 集成指南

styled-components 定义

styled-components 属于 css in js 范畴的常用库。它借助 JavaScript 赋予了 CSS 变量、循环及函数等原生不具备的功能。

相较于其他预处理器的优势

Sass 和 Less 等工具虽能缓解部分 CSS 局限，但需学习新语法并经历编译过程，复杂的 Webpack 配置常令开发者感到抵触。
具备 Sass 或 Less 经验者可快速转向 styled-components，因其嵌套、& 继承等语法相似。该库有效降低了学习成本与开发环境门槛，适用于 React 及 React Native 项目。

解决的问题

传统 className 的编写方式难以被习惯 CSS 的开发者接受。
导入 CSS 文件会导致变量泄露至全局，必须配置 Webpack 以实现模块化。
此外，它提供了原生 CSS 所缺乏的能力，从而加速项目快速开发。

官方文档

https://styled-components.com/docs

安装

npm install --save styled-components

编辑器智能提示

2018-06-11更新

WebStorm 需安装 styled-components 插件
VSCode 已支持智能提示

最基础的使用

import styled from 'styled-components'
const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;
// 相当于  const Title = styled.h1(xx)
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;
    render () {
        return (
            <Wrapper>
                <Title>Hello styled-components</Title>
            </Wrapper>
        )
    }

控制台会输出随机 className，由 styled-components 自动生成。注意：组件名必须大写，否则将被解析为普通标签。

传递props

const Button = styled.button`
    background: ${props => props.primary ? 'palevioletred' : 'white'};
    color: ${props => props.primary ? 'white' : 'palevioletred'};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`
render(
    <div>
        <Button>Normal</Button>
        <Button primary>Primary</Button>
    </div>
);

组件接收的 props 可在定义时获取，便于实现定制风格组件。

props高级用法

设置默认值，在未指定必传值时通过 defaultProps 提供默认值。

export default class ALbum extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            // 接收传递的值
            imgSrc: props.imgSrc
        }
    }
    render () {
        const {imgSrc} = this.state
        return (
            <Container imgSrc={imgSrc}>
            </Container>
        )
    }
}
// 在这里是可以拿到props的 
const Container = styled.div`
    background-size: cover;
    background-image: url(${props =>  props.imgSrc});
    width: 100%;    
    height: 300px;
`
// 当然没传值也没关系  我们设置默认值
Container.defaultProps = {
    imgSrc: Cover
}

塑造组件

此功能极具实用性。当需为已有组件添加样式时，可采用此方法。

// 传递className 在react-native 中要使用 style
const Link = ({className , children}) => (
    <a className={className}>
        {children}
    </a>
)
const StyledLink = styled(Link)`
    color: palevioletred;
`
render(
    <div>
        <Link>普通组件</Link>
        <StyledLink>有颜色吗？</StyledLink>
    </div>
);

组件样式继承

const Button = styled.button`
    color: palevioletred;
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
`;
const TomatoButton = Button.extend`
    color: tomato;
    border-color: tomato;
`;
// TomatoButton 部分样式继承自 Button 这种情况下不会生成两个class

改变组件标签

在特定需求下，可将组件标签转换，例如将 button 转换为 a 标签。

// 利用上面定义的 Button 组件 调用 withComponent 方法
const Link = Button.withComponent('a')

维护其他属性

若需使用第三方库样式，可通过此方法轻松实现。

const Input = styled.input.attrs({
    // 定义静态 props
    type: 'password',
    // 没传默认使用 1em
    margin: props => props.size || '1em',
    padding: props => props.size || '1em'
})`
    color: palevioletred;
    font-size: 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    // 动态计算props
    margin: ${props => props.margin};
    padding: ${props => props.padding}
`
render ( <Input size='1em'></Input>  <Input size='2em'></Input> )

动画

动画生成随机类名，避免污染全局样式。

import { keyframes } from 'styled-components'
// CSS 动画
const rotate360 = keyframes`
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
`
const Rotate = Button.extend`
    animation: ${rotate360} 2s linear infinite;
`
render ( <Rotate>  💅  </Rotate> )

结语

styled-components 虽提升了可维护性并解决诸多问题，但破坏了原生体验，往往需编写更多代码以满足业务需求。期待未来出现更优方案，更多 styled-components 资料请关注本站其他文章！

styled-components 快速入门：从安装到高级用法详解