js类库styled-components入门实例分析

这篇文章主要介绍“js类库styled-components入门实例分析”，在日常操作中，相信很多人在js类库styled-components入门实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js类库styled-components入门实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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 所不具备的能力，能够加速项目的快速开发

安装

npm install --save styled-components

编辑器智能提示

2018-06-11更新

• webstORM需要安装 styled-component 插件

• vscode已支持智能提示

最基础的使用

import styled from 'styled-components'const Title = styled.h2`    font-size: 1.5em;    text-align: center;    color: palevioletred;`;// 相当于  const Title = styled.h2(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 中要使用 styleconst 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> )

到此，关于“js类库styled-components入门实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！