React样式模块化解决方案--styled-components

介绍

styled-components是一个css in js 类库。

可以防止css样式污染、组件更改时更容易定位到相关的样式。

它使用标签模板来对组件进行样式化。它移除了组件的样式之间的映射。这意味着，当你定义一个样式时，实际上只是创建了一个普通的React组件，定义的样式也附在它上面。

由于React对css的封装非常弱，导致了一系列第三方库，用来加强React的CSS操作（统称 CSS in JS，使用JS语言写CSS）

另一个CSS in JS库 polished

起步

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 }