introduce

Styled – Components is a CSS in JS class library.

This prevents CSS style contamination and makes it easier to locate related styles when components change.

It uses tag templates to style components. It removes the mapping between styles of components. This means that when you define a style, you’re actually just creating a normal React component with the defined style attached to it.

Because React encapsulation of CSS is very weak, a series of third-party libraries are used to enhance CSS operations in React.

Find another CSS in JS library polished

start

1. Create the React project

2, yarn add styled components, NPM install –save styled components

Basic usage

import styled from 'styled-components'
Copy the code
import styled from 'styled-components'

const Container = styled.div` background-color : #f60; border : 10px solid #f60; `
export default Container;

Copy the code
import Container from './basic/index'
import P from './basic/detals'
import './App.css';

function App() {
  return (
    <div className="App">
      <Container>
        <P>Ha ha</P></Container>
    </div>
  );
}

export default App;

Copy the code
import styled from 'styled-components'

const P = styled.p` background-color : #f00; font-size:24x; `
export default P;

Copy the code

Make style judgments based on 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

Copy the code

You can also use CSS to define a style and judge it by its properties.

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
Copy the code

Use (note: Attributes cannot be humped)

  <StyleButton>button</StyleButton>
  <StyleButton error='true'>error btn</StyleButton>
  <StyleButton border='true'>border btn</StyleButton>
  <StyleButton widthborder='true'>width btn</StyleButton>
Copy the code

You can also pass in a style property directly.

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}
`
Copy the code

Style extension

When the component library style is not satisfied

import styled from 'styled-components'
import { Button } from 'antd'

const ExpendBtn = styled(Button)` color:red; border:3px solid red; `
export default ExpendBtn
Copy the code

If you want the component to be rerendered, you can use the AS property. Suppose the ExpendBtn component is rendered using a tag.

 <ExpandBtn as="a" href='http://www.baidu.com'>expand as </ExpandBtn>
Copy the code

Custom component styles

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} 

Copy the code

Use the.attrs API to style the component

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;

Copy the code

animation

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

Copy the code

Define child component styles in parent components

1. Pass the tag name

const Wrapper = styled.div` width:220px; > h1{ color:red } `
Copy the code

2. Search by component name

const Wrapper = styled.div`
	width:220px;
  ${Child}{
		color:red
  }
`
Copy the code

The components here can only be Styled.

priority

Use &&

const Custom = styled(Button)` && { width:200px; } `
Copy the code

reference

website

StyledComponents

React CSS solution

styled-componts