React的CSS方案

发表于 更新于 分类于 ， 本文字数： 176 阅读时长 ≈ 1 分钟

一、方案选择

React的css in js有很多种，这里推荐按照start的数量进行选择。如果有一些特别合自己心意的除外。以下是一个搜集方案的网址

点我跳转

二、使用示例

styled-components

官方文档

  1. 安装
1
yarn add styled-components
  1. 导入
1
import styled from 'styled-components'
  1. 定义标签
1
2
3
4
5
const Div1 = styled.div`
    width: 100px;
    height: 100px;
    border: 1px soild red;
`
  1. 直接使用
1
2
3
4
5
6
return (
    <div>
        我是一个styled标签
        <Div1 />
    </div>
)

emotion

官方文档

  1. 安装
1
yarn add @emotion/core
  1. 导入
1
2
/** @jsx jsx */
import {jsx} from "@emotion/core"
  1. 直接在jsx中使用css属性使用
1
2
3
return (
    <div css={{ border: 1px soild red, width: 100, height: 100 }}>我是emotion方案</div>
)