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

发布时间:2022-07-14 14:06:31 作者:iii
来源:亿速云 阅读:162

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

styled-components 是什么?

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

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

解决了什么问题?

安装

npm install --save styled-components

编辑器智能提示

2018-06-11更新

最基础的使用

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

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

推荐阅读:
  1. JS类库管理
  2. js类库属于bootstrap么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js styled-components

上一篇:小程序如何实现模糊搜索功能

下一篇:小程序怎么自定义弹框

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》