首先优点就是 可以不用装node-sass、less那些了
安装
npm install styled-components
css in js的基本使用:
import styled from 'styled-components'
const BackStyle = styled.div`
font-size: 20px;
color: red;
`
function App() {
return (
<BackStyle>
<p>jamas</p>
</BackStyle>
)
}
styled-components中包含各种标签同名的函数,在写样式的时候,就调用函数就行,重点是使用标签模板字符串
的形式来调用函数。
函数返回一个react的组件。
const BackStyle = styled.div`
font-size: 20px;
color: red;
`
这里就是调用styled-components 中的div函数,使用的是标签模板字符串的形式
每个样式后面,必须写分号。标签模板字符串会从这里进行分割
在css in js中写的写法形式,跟less scss基本一样,可以嵌套,可以使用伪元素 伪类等等。
const Style = styled.div`
color: purple;
h2 {
font-size: 50px;
}
ul > li {
color: orange;
&.active {
color: red;
}
&:hover {
background: #aaa;
}
&::after {
content: "abc"
}
}
`
css in js 的中级使用
const XInput = styled.input`
border-color: ${props => props.bob};
`
<XInput type="password" bob=123 />
//这里的type属性就会传递到input标签中
attrs调用之后,也是返回一个函数
const XInput = styled.input.attrs({
placeholder: "请输入密码",
paddingLeft: "20px"
})`
border-color: red;
padding-left: ${props => props.paddingLeft};
&:focus {
outline-color: orange;
}
`
//调用attrs函数中,props对象中保存着属性值
给组件传递state中的值
const XInput = styled.input`
color: ${props => props.color}
`
<XInput color="blue">
</XInput>
css in js 的高级使用
const StyleDiv1 = styled.div`
padding: 10px 20px;
`
const StyleDiv2 = styled.div(StyleDiv1)`
color: red;
`
//StyleDiv2 就拥有了StyleDiv1的padding属性了
主题定制
import { ThemeProvider } from 'styled-components';
<ThemeProvider theme={{color: "red", fontSize: "30px"}}>
<App />
</ThemeProvider>
//在App子组件中,就可以拿到共享的数据
const StyleInput = styled.input`
color: ${props => props.theme.color}
`
插件推荐
vscode-styled-components
为写css in js提供智能提示。