React uses CSS IN JS

Why CSS IN JS

Address the limitations of CSS, such as lack of dynamic functionality, scope, and portability

Advantages of CSS IN JS

Giving CSS a separate scope prevents CSS styles from leaking out of components and causing style conflicts
Make components portable and reusable
Styles have dynamic capabilities

disadvantages

Increase the complexity of the project
Automatically generated selectors greatly reduce the readability of the code

Emotion

The installation

yarn add @emotion/react
Copy the code

Use method 1: JSX Pragma

Inform Babel that instead of converting JSX syntax to React. Createment, it needs to convert JSX methods

/ * *@jsx jsx */
Copy the code

If you are using the create-react-app version of React17+ or configure Babel runtime as automatic, you will need to configure the following configuration (see the documentation for emotion.sh/docs/ CSS-pr…).

/ * *@jsxImportSource @emotion/react */
import {  css } from '@emotion/react'
Copy the code

Use Method 2: Babel Preset (recommended)

{
  "presets": ["@emotion/babel-preset-css-prop"]}Copy the code

use

Methods a

import { css } from '@emotion/react'
const style = css`
width: 200px;
height: 200px;
background: red
`
function App() {
  return (
    <div css={style}>
    </div>)}export default App
Copy the code

Way 2

const style = css({
  width: 200.height: 200.background: 'blue'
})
Copy the code

Priority of CSS properties

The CSS properties in the props object take precedence over the CSS properties inside the component, and the default style of the component can be overridden when the component is called

Child components

const style = css`
width: 100px;
height: 40px;
line-height: 40px;
color: #fff;
background: red;
border-radius: 5px;
`
export default function Button(props){
    return (
        <button  css={style}  {. props} >{props.text}</button>)}Copy the code

When a parent component introduces a child component, the background passed by the parent overwrites the child component’s own background

function App() {
  return (
    <div>
      <Button text="Button" css={{background:'#4e6ef2'}} / >
    </div>)}Copy the code

Styled Components

There are two ways to build styling components

import styled from '@emotion/styled'

const Button = styled.button`
width: 100px;
height:30px;
background: #4e6ef2;
`
Copy the code

import styled from '@emotion/styled'

const Container = styled.div({
  width: 960.margin: '0 auto'
})
Copy the code

Will be called in the group

function App() {
  return (
    <Container>
      <Button>button</Button>
    </Container>)}Copy the code

Override style according to props

/ / write one
const Button = styled.button`
width: 100px;
height:30px;
background: ${props => props.bgColor || '#4e6ef2'};
`

/ / write two
const Container = styled.div(props= > ({
  width: props.w || 960.margin: '0 auto',}))/ / writing three
const Container = styled.div({
  width: 960.margin: '0 auto'
}, props= > ({
  width: props.w
}))

function App() {
  return (
    // Note that w="1000px" when w is a string
    <Container w={1000}>
      <Button bgColor="blue">button</Button>
    </Container>)}Copy the code

Add styles to components

import styled from '@emotion/styled'

function Button(props){
  return (<button className={props.className}>{props.text}</button>)}const RedButton = styled(Button)`
background: red;
color: #fff;
`
/ / write two
// const RedButton = styled(Button)({
// background: 'red',
// color:'#fff'
// })
function App() {
  return (
    <div>
      <RedButton text='button'/>
    </div>)}Copy the code

Styles child components in parent components

const Child = styled.div`
color: red;
background: black;
`
/ / write one
const Parent1 = styled.div`
${Child} {
  color: green;
}
`
/ / write two
const Parent2 = styled.div({
  [Child]:{
    color: 'blue'}})Copy the code

CSS selectors`&`

The ampersand in emotion is used the same way as the ampersand in sass to denote the current element

// & represents the current UL label
const List = styled.ul` &>li{ list-style: none; }Copy the code

As allows you to modify the label of a component

const List = styled.ul`... `
function App() {
  return (
    <div>// The tag rendered to the page is div<List as="div">.</List>
    </div>)}Copy the code

Style combination

const base = css`
font-size:16px;
`

const button = css`
border-radius:5px;
background: #4e6ef2;
color: #fff;
`

function App() {
  return (
    <div>
        <button css={[base,button]}>button</button>
    </div>)}Copy the code

Global style

import { css, Global } from '@emotion/react'

const base = css`
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
`

function App() {
  return (
    <div>
      <Global styles={base}/>
      <ul>
        <li>1</li>
      </ul>
    </div>)}Copy the code

Use KeyFrames to define keyframe animations

import { css, keyframes } from '@emotion/react'

const movein = keyframes` 0% { background: red; left: 0; top: 0; } 100% { background: blue; left: 300px; top: 300px; } `
const box = css`
position: absolute;
width: 100px;
height: 100px;
animation: ${movein} 2s;
`

function App() {
  return (
    <div css={box}>
     
    </div>)}Copy the code

Using themes

The parent uses the ThemeProvider component and sets the theme property

import { ThemeProvider } from '@emotion/react'

const theme = {
  colors: {
    primary: 'blue'}}function App() {
  return (
   <ThemeProvider theme={theme}>.</ThemeProvider>)}Copy the code