前言
react项目中,更提倡组件化方案,自然形成了将HTML、CSS、JavaScript集中编写管理的方式,就引出了css in js这种方案。
有很多流行的第三方库,比如: styled-components
安装
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 的中级使用
-
props穿透
const XInput = styled.input` border-color: red; ` <XInput type="password"/> //这里的type属性就会传递到input标签中
-
attrs函数使用
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提供智能提示。
结语
这篇完全是为了自己能够看懂,做的笔记;跟着coderwhy老师的节奏走,大神勿喷。