本文共 3445 字,大约阅读时间需要 11 分钟。
npm install --save styled-components
2018-06-11更新
最基础的使用
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 () } Hello styled-components
此时我们可以看到控制台中输出了一个随机的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();
在组件传递的props都可以在定义组件时获取到,这样就很容易实现定制某些风格组件
设置默认值,在未设定必须传值的情况下我们会给一个默认值(defaultProps)
export default class ALbum extends React.Component { constructor (props) { super(props) this.state = { // 接收传递的值 imgSrc: props.imgSrc } } render () { const {imgSrc} = this.state return () }}// 在这里是可以拿到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 中要使用 styleconst Link = ({className , children}) => ( {children} )const StyledLink = styled(Link)` color: palevioletred;`render(普通组件);有颜色吗?
组件样式继承
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 ( )
动画
动画会生成一个随机类名 而不会污染到全局
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 (
转载地址:http://rigni.baihongyu.com/