如何在不直接导入CSS文件的情况下为React组件应用CSS样式？

这里有几种无需直接导入全局CSS文件就能给React组件添加样式的实用方案，能解决内联样式在复杂场景下繁琐难维护的问题：

1. CSS Modules #

这是React项目中常用的组件级样式方案，样式文件会被处理成局部作用域，避免全局样式冲突。

步骤示例： #

1. 创建样式文件（命名规则为[组件名].module.css）：

/* Button.module.css */
.button {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #1d4ed8;
}

2. 在组件中导入并使用：

import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

优势：保留传统CSS写法，支持所有CSS特性，自动避免样式冲突，适合习惯写原生CSS的开发者。

2. styled-components（CSS-in-JS） #

将样式直接写在组件文件中，样式与组件逻辑绑定，是组件化开发的热门方案。

代码示例： #

import styled from 'styled-components';

// 定义带样式的组件
const StyledButton = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #1d4ed8;
  }
`;

function Button() {
  return <StyledButton>Click Me</StyledButton>;
}

优势：支持CSS嵌套、变量、主题切换，样式与组件紧密耦合，复杂场景下维护性强，还能通过props动态修改样式。

3. Tailwind CSS 原子类 #

无需编写自定义CSS，直接通过预定义的原子类在JSX中组合样式，适合快速搭建UI。

代码示例： #

function Button() {
  return (
    <button className="px-4 py-2 rounded bg-blue-600 text-white border-none cursor-pointer hover:bg-blue-700">
      Click Me
    </button>
  );
}

优势：无需维护CSS文件，原子类可复用，能快速迭代UI，减少冗余代码，但需要熟悉Tailwind的类名规则。

4. Emotion（CSS-in-JS方案） #

和styled-components类似，性能更优，支持TypeScript，提供两种使用方式：

方式一：styled组件 #

import styled from '@emotion/styled';

const StyledButton = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #1d4ed8;
  }
`;

function Button() {
  return <StyledButton>Click Me</StyledButton>;
}

方式二：css prop #

import { css } from '@emotion/react';

const buttonStyle = css`
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #2563eb;
  color: white;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #1d4ed8;
  }
`;

function Button() {
  return <button css={buttonStyle}>Click Me</button>;
}

优势：灵活性高，支持更细粒度的样式控制，对TypeScript友好，适合需要高性能和复杂样式逻辑的项目。

内容的提问来源于stack exchange，提问作者Anu