前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科

骚里骚气的styled-components快速入门

前端素材 技术02-千编万码 1月前  次浏览

styled-components 是什么?

  • styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等。

相对于其他预处理有什么优点?

  • 诸如 sass&less 等预处理可以解决部分 css 的局限性,但还是要学习新的语法,而且需要对其编译,其复杂的 webpack 配置也总是让开发者抵触。
  • 如果有过sass&less的经验,也能很快的切换到styled-components,因为大部分语法都类似,比如嵌套,& 继承等, styled-componens 很好的解决了学习成本与开发环境问题,很适合 React 技术栈 && React Native 的项目开发。

解决了什么问题?

  • className 的写法会让原本写css的写法十分难以接受
  • 如果通过导入css的方式 会导致变量泄露成为全局 需要配置webpack让其模块化
  • 以及上面提到的解决了原生 css 所不具备的能力,能够加速项目的快速开发

官方文档

https://www.styled-components.com/docs


安装

npm install --save styled-components

编辑器智能提示

2018-06-11更新

  • webstorm需要安装 styled-component 插件
  • 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 (
            
                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都可以在定义组件时获取到,这样就很容易实现定制某些风格组件

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 中要使用 style
const 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


相关链接

发表评论