介绍
styled-components是一个css in js 类库。
可以防止css样式污染、组件更改时更容易定位到相关的样式。
它使用标签模板来对组件进行样式化。它移除了组件的样式之间的映射。这意味着,当你定义一个样式时,实际上只是创建了一个普通的React组件,定义的样式也附在它上面。
由于React对css的封装非常弱,导致了一系列第三方库,用来加强React的CSS操作(统称 CSS in JS,使用JS语言写CSS)
起步
1、创建react项目
2、yarn add styled-components 、npm install --save styled-components
基本用法
import styled from 'styled-components'
import styled from 'styled-components'
const Container = styled.div`
background-color : #f60;
border : 10px solid #f60;
`
export default Container;
import Container from './basic/index'
import P from './basic/detals'
import './App.css';
function App() {
return (
<div className="App">
<Container>
<P>
哈哈
</P></Container>
</div>
);
}
export default App;
import styled from 'styled-components'
const P = styled.p`
background-color : #f00;
font-size:24x;
`
export default P;
基于props做样式判断
import styled from 'styled-components'
import { Button } from 'antd'
const StyleButton = styled(Button)`
background-color:${props => (props.error?"red":'blue')};
color:#fff;
border:${props =>(props.border?"2px solid black":"none")}
`
export default StyleButton
也可以使用CSS定义一个样式,然后根据属性判断。
import styled ,{ css } from 'styled-components'
import { Button } from 'antd'
const extraCss = css`
font-size:20px;
background:#f6a;
padding:20px;
border:10px solid red;
`
const StyleButton = styled(Button)`
background-color:${props => (props.error?"red":'blue')};
color:#fff;
border:${props =>(props.border?"2px solid black":"none")};
${props => props.widthborder && extraCss}
`
export default StyleButton
使用(注意:属性不能使用驼峰的形式)
<StyleButton>button</StyleButton>
<StyleButton error='true'>error btn</StyleButton>
<StyleButton border='true'>border btn</StyleButton>
<StyleButton widthborder='true'>width btn</StyleButton>
还能直接传入一个样式属性。
const StyleButton = styled(Button)`
background-color:${props => (props.error?"red":'blue')};
color:#fff;
border:${props =>(props.border?"2px solid black":"none")};
min-width:${props => props.minwidth || 200}px;
${props => props.widthborder && extraCss}
`
样式扩展
当组件库样式不满足时
import styled from 'styled-components'
import { Button } from 'antd'
const ExpendBtn = styled(Button)`
color:red;
border:3px solid red;
`
export default ExpendBtn
如果想要组件重新渲染,可以使用as属性。假设使用标签来渲染 ExpendBtn组件。
<ExpandBtn as="a" href='http://www.baidu.com'>expand as </ExpandBtn>
自定义组件样式
import styled from 'styled-components'
const Div = ({className , children})=> <div className={className}>{children}</div>
const CustomDiv = styled(Div)`
color:red;
border:3px solid red;
`
export {CustomDiv,Div}
使用.attrs API为组件添加样式
import styled from "styled-components";
const PasswordInput = styled.input.attrs({
type: "password",
margin: props => props.size || "1em",
padding: props => props.size || "1em"
})`
color: palevioletred;
font-size: 1em
`;
export default PasswordInput;
动画
keyframes API
import styled ,{ keyframes } from "styled-components";
const rotateStyle = keyframes`
from{
transform: rotate(0deg)
}
to{
transform:rotate(360deg)
}
`
const RotateCom = styled.div`
display:inline-block;
background:#f60;
width:100px;
height:100px;
animation:${rotateStyle} 2s linear infinite;
`
export default RotateCom
父组件中 定义子组件样式
1、通过tag名
const Wrapper = styled.div`
width:220px;
> h1{
color:red
}
`
2、通过组件名来查找
const Wrapper = styled.div`
width:220px;
${Child}{
color:red
}
`
这里的组件只能是Styled方式定义的。
优先级
使用&&
const Custom = styled(Button)`
&& {
width:200px;
}
`