React中不能在条件渲染分支里import CSS Module，需用动态import()按需加载并缓存结果，再通过导出的类名映射对象绑定className，注意SSR时undefined防护及.module.css后缀要求。
React 中不能直接在条件渲染分支里 import 模块 CSS（比如 import './Button.module.css'），因为 import 是编译时静态语句，无法被 if 或三元表达式包裹执行。想实现「按需加载 + 条件应用样式」，得拆成两步：先动态导入模块，再用其导出的类名控制渲染。
动态 import() 加载 CSS Module 文件
ES 提案支持异步动态导入，返回 Promise，可用于按需加载 CSS Module。但注意：CSS Module 导出的是类名映射对象，不是样式本身 —— 样式仍会在构建时注入全局 scope，只是类名哈希化了。
-
import()必须是顶层调用或函数内直接调用，不能写在 JSX 里或三元表达式中 - 加载后需缓存结果，避免重复请求（尤其 SSR 或多次渲染）
- CSS Module 文件必须以
.module.css结尾，否则 Webpack/Vite 不会启用模块化处理
示例：
const loadButtonStyles = async () => {
const styles = await import('./Button.module.css');
return styles;
};
用 className 动态绑定模块类名
CSS Module 导出的对象形如 { primary: 'Button_primary__abc123' }，你得把它的属性值传给元素的 className。不能拼字符串，也不能硬编码类名 —— 那就失去模块化意义了。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
立即学习“前端免费学习笔记（深入）”；
- 如果模块导出多个类（如
primary、disabled），可用对象解构或属性访问获取 - 结合状态做条件拼接时，推荐用
clsx或手写模板字符串，避免空格残留 - 不要在
useEffect里反复调用import()并 setState，容易触发多次重渲染
示例（配合状态）：
const [buttonStyles, setButtonStyles] = useState(null);
const [variant, setVariant] = useState('primary');
useEffect(() => {
loadButtonStyles().then(setButtonStyles);
}, []);
return buttonStyles ? (
<button className={`${buttonStyles.primary} ${variant === 'disabled' ? buttonStyles.disabled : ''}`}>
Click me
</button>
) : null;
为什么不用 require.ensure 或 React.lazy？
React.lazy 只接受返回 Promise<{ default: Component }> 的函数，不适用于纯 CSS；require.ensure 是 Webpack 2 的旧 API，已废弃。强行包装会导致构建失败或运行时 undefined。
-
React.lazy+Suspense仅对组件有效，对样式无感知 - 某些打包器（如 Vite）不支持对
.css文件使用import()，但.module.css可以 —— 因为它被当作 JS 模块处理 - 若用普通 CSS（非 Module），动态
import()会注入样式，但无法安全获取类名，易冲突
真正需要关注的是：动态加载 CSS Module 后，类名映射只在客户端生效；服务端渲染时该模块尚未加载，className 会是 undefined，必须加空值防护或提前加载。
