介绍

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 } 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;
	}
`

参考

官网

StyledComponents

react css解决方案

styled-componts