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

最新推荐文章于 2026-04-18 18:57:56 发布

原创

最新推荐文章于 2026-04-18 18:57:56 发布 · 3.4k 阅读

标签

#react.js #css #前端

收录于

本文介绍了四种CSS应用方式：普通内联style的使用、引入CSS文件、CSSModule解决组件样式冲突，以及Sass和CSS-in-JS（如Styled-components和Emotion）的优缺点。作者倾向于CSSModule因其简单易学且性能较好。

文章目录

一、普通方式使用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' }}>已发布