您好,登录后才能下订单哦!
这篇文章主要介绍“js类库styled-components入门实例分析”,在日常操作中,相信很多人在js类库styled-components入门实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js类库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帮我们完成的. 注意: 组件名要以大些开头 不然会被解析成普通标签
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都可以在定义组件时获取到,这样就很容易实现定制某些风格组件
设置默认值,在未设定必须传值的情况下我们会给一个默认值(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入门实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。