React styled-components （一） —— 基本使用

https://github.com/styled-components/styled-components

介绍

styled-components 是一个针对 React 的 css in js 类库。

和所有同类型的类库一样，styled-components 通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。解决了 css 全局命名空间，避免样式冲突的问题，维护起来更加方便。

优点

• 贯彻 React 的 everything in JS 理念，降低 js 对 css 文件的依赖
• 保留前端开发 CSS 书写习惯，无学习和迁移成本
• 使用方便，不需要配置 webpack，开箱即用
• 为样式生成唯一的类名，不用再担心样式命名的问题，移除样式与组件之间的对应关系
• 样式可以使用变量，更加灵活
• 组件的逻辑、生命周期、样式、结构完全和其它组件解耦，对组件维护很有帮助

缺点

可读性差，不方便直接看出组件的 html 元素。

安装

npm install styled-components 或
cnpm install styled-components 或
yarn add styled-components

安装完成之后，package.json ：

{
  "dependencies": {
    "antd": "^4.16.10",
    "axios": "^0.21.1",
    "less": "^4.1.1",
    "less-loader": "4.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "5.3.9",
}

引入

import styled from "styled-components"

使用

基本用法

新建 Demo.js 文件：

import React, { Component } from 'react'
import styled from 'styled-components';
// Create a