这篇文章主要介绍“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 中要使用 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入门实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡网网站，小编会继续努力为大家带来更多实用的文章！