-
styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等。
-
最简单的用法:
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> ) }
注意: 组件名要以大写开头 不然会被解析成普通标签
-
传递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都可以在定义组件时获取到,这样就很容易实现定制某些风格组件