ReactJS项目自定义主题及样式组件最佳实现方案咨询

别选“每个组件单独引零散CSS类”的方案，后期维护会非常痛苦，要达到Bootstrap那种开箱即用的效果，按下面三层结构搭就行，完全适配React生态，学习成本极低：

1. 全局基础样式层：一次性注入，全项目生效 #

首先把你设计规范里的全局规则抽成全局样式文件，只需要在项目入口src/index.js里引入一次，不用在各个业务组件里重复引入。
建议把所有固定设计值全部抽成CSS变量放在:root作用域下，后面改主题、做暗黑模式只需要修改变量值，不用全局搜硬编码：

/* src/styles/global.css */
/* 设计Token全局定义 */
:root {
  --font-family-base: 你的规范字体栈, sans-serif;
  --color-primary: 主色色值;
  --color-primary-hover: 主色悬停态色值;
  --border-radius-sm: 2px;
  --border-radius-base: 4px;
  --spacing-base: 8px;
  /* 所有规范里的固定值：字号、间距、阴影、边框色全部抽成变量 */
}
/* 全局样式重置、基础标签默认样式 */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--font-family-base);
}

在入口文件引入一次就全局生效：

// src/index.js
import './styles/global.css';
// 其他入口逻辑

2. 基础组件层：把自定义元素封装成独立React组件 #

你提到的按钮、复选框、输入框、图标这类通用交互元素，不要靠零散CSS类拼接实现，直接封装成无业务逻辑的基础组件，组件自身的样式和组件文件放在一起，内部逻辑封装好，外部只需要通过props控制状态，和用成熟UI框架的体验完全一致。
举个基础按钮组件的例子：

// src/components/Button/index.jsx
import styles from './Button.module.css'; // 用CSS Modules避免类名冲突，不想用就写普通css也行
const Button = ({
  type = 'default',
  size = 'middle',
  disabled = false,
  children,
  ...rest
}) => {
  const classList = [
    styles.btn,
    styles[`btn-${type}`],
    styles[`btn-${size}`],
    disabled ? styles.disabled : ''
  ].filter(Boolean).join(' ');

  return (
    <button className={classList} disabled={disabled} {...rest}>
      {children}
    </button>
  )
};
export default Button;

组件样式里全部引用之前定义的全局CSS变量，不要硬编码色值、字号：

/* src/components/Button/Button.module.css */
.btn {
  border-radius: var(--border-radius-base);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:not(.disabled):hover {
  background: var(--color-primary-hover);
}
/* 其他尺寸、状态样式按规范写就行 */

3. 统一出口层：简化调用路径 #

把所有封装好的基础组件在src/components/index.js里统一导出，业务侧调用的时候不用写冗长的相对路径，直接从统一出口引入即可：

// src/components/index.js
export { default as Button } from './Button';
export { default as Input } from './Input';
export { default as Checkbox } from './Checkbox';
export { default as Icon } from './Icon';
// 后续新增的基础组件都在这里追加导出

业务里使用的时候和调用Bootstrap组件没有区别：

import { Button, Input } from 'components'; // 如果配了CRA路径别名可以直接这么写，没配就写相对路径

function LoginPage() {
  return (
    <div>
      <Input placeholder="请输入账号" />
      <Button type="primary">登录</Button>
    </div>
  )
}

为什么不推荐零散引入CSS类的方案 #

• 全局类名很容易出现命名冲突，后期修改类名需要全局搜索替换，维护成本极高
• 调用时需要记忆大量类名、类名组合规则，没有组件props的编辑器提示，写错了很难排查
• 后续要做主题切换、样式统一迭代的时候，零散类名的改造成本是封装组件方案的数倍

如果后续需要更灵活的动态主题能力，在这套结构的基础上把CSS变量换成动态注入的形式就行，不用重构现有业务代码。

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