React18入门（第四篇）——React中的4种CSS使用方式，CSS Module、CSS-in-Js详解

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文章目录

一、普通方式使用CSS

1.1 元素内联 style

和 HTML 元素的 style 类似
但必须是 JS 对象的写法不能是字符串
样式名要驼峰式写法例如fontSize

import React, { FC } from 'react'
import './QuestionCard.css'

type PropsType = {
  id: string
  isPublished: boolean
}
const QuestionCard: FC<PropsType> = props => {
  const { id, isPublished } = props
  return (
    <div key={id} className="list-item">
      {isPublished ? (
        <span style={{ color: 'green', fontSize: '20px' }}>已发布</span>
      ) : (
        <span>未发布</span>
      )}
    </div>
  )
}
export default QuestionCard

1.2 引入 CSS 文件

使用 CSS 文件
JSX 使用 className
可使用 clsx 或 classnames 做条件判断

定义
在这里插入图片描述
引入并使用

1.3 类名插件 – Classnames

classname地址https://www.npmjs.com/package/classnames

安装

# via npm
npm install classnames

# via Bower
bower install classnames

# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames

使用

var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'

1.4 注意事项

注尽量不要用内联 style

内联style 代码多性能差、扩展性不好
外链 CSS 文件可复用代码可单纯缓存文件
PS: 这和 React 无关学HMTL CSS 时就应该知道

二、CSS Module

2.1 普通 CSS 的问题

React 使用组件化开发不适合
多个组件就需要多个 CSS 文件
多个 CSS 文件就很容易造成 className 重复产生覆盖。不好管理
CSS Modlule 就是解决方案之一

2.2 CSS Module 的特点

每个 CSS 文件都当做单独的模块命名格式 xxx.module.css
为每个 className 增加后缀名不让它们重复
Creat-React-App 原生支持 CSS Module

2.3 简单使用

2.3.1 定义样式

在这里插入图片描述
2.3.2 使用

在这里插入图片描述

三、使用 sass

3.1 sass 简介

CSS 语法比较原始比如说不能嵌套
现代开发一般使用 less sass 等预处理语言
create-react-app 原生支持 Sass Module , 后缀改成 .scss 即可

3.2 使用

定义时文件名用 .scss 后缀

**在这里插入图片描述**
使用示例

在这里插入图片描述

四、CSS-in-JS

4.1 CSS-in-JS 简介

是一种解决方案而非工具名称有好几个工具
在 JS 中写 CSS带来极大的灵活性
它和内联 style 完全不一样也不会有内联 style 的问题

4.2 CSS-in-JS 常用工具之 Styled-component

官网https://styled-components.com/

安装

npm install styled-components --save

使用

import React, { FC } from 'react'
import styled, { css } from 'styled-components'

type ButtonPropsType = {
  primary?: boolean
}
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #bf4f74;
  color: #bf4f74;
  margin: 0 1em;
  padding: 0.25em 1em;

  ${(props: ButtonPropsType) =>
    props.primary &&
    css`
      background: #bf4f74;
      color: white;
    `}
`
const Container = styled.div`
  text-align: center;
`

const Demo: FC = () => {
  return (
    <>
      <div>
        <p>styleComponentsDemo</p>
        <Container>
          <Button>Normal Button</Button>
          <Button primary>Primary Button</Button>
        </Container>
      </div>
    </>
  )
}
export default Demo