介绍
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 }