在React组件中如何导入JS函数？怎样编写自动注入对应样式的HOC？

你原来的写法问题在于ES模块的import关键字是静态关键字，不能直接在运行时用模板字符串动态导入，以下是几种生产环境可用的实现方案：

方案1：异步动态加载样式（运行时加载，适配所有构建工具） #

使用动态导入语法import()（返回Promise）配合React状态管理加载状态即可实现你的需求：

// applyStyles.js
import { useState, useEffect } from 'react';

const applyStyles = (Component) => (props) => {
  const [styles, setStyles] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 动态导入对应名称的样式文件
    import(`./${Component.name}.css.js`)
      .then(module => {
        setStyles(module.default || module.styles);
        setLoading(false);
      })
      .catch(err => {
        console.warn(`未找到${Component.name}对应的样式文件`, err);
        setLoading(false);
      });
  }, [Component.name]);

  // 加载过程可以返回占位组件，也可以直接返回null
  if (loading) return null;

  return <Component {...props} style={styles} />;
};

使用时直接包裹目标组件即可：

const StyledButton = applyStyles(Button);

注意：如果使用Vite作为构建工具，需要在vite.config.js中添加对应规则避免构建时丢失样式文件，配置如下：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      external: /\.css\.js$/
    }
  }
}

方案2：构建时静态导入（性能更优，无运行时加载延迟） #

如果不需要运行时动态匹配，只是想简化导入逻辑，可以用构建工具的文件扫描能力提前加载所有样式文件，运行时直接匹配即可：

// applyStyles.js （Webpack环境示例，用require.context）
const styleModules = require.context('./', true, /\.css\.js$/);

const applyStyles = (Component) => (props) => {
  let styles = {};
  try {
    const styleModule = styleModules(`./${Component.name}.css.js`);
    styles = styleModule.default || styleModule.styles;
  } catch (e) {
    console.warn(`未找到${Component.name}对应的样式文件`);
  }
  return <Component {...props} style={styles} />;
};

Vite环境可以用import.meta.glob实现相同逻辑：

// applyStyles.js （Vite环境示例）
const styleModules = import.meta.glob('./**.css.js', { eager: true });

const applyStyles = (Component) => (props) => {
  const stylePath = `./${Component.name}.css.js`;
  const styles = styleModules[stylePath]?.default || styleModules[stylePath]?.styles || {};
  return <Component {...props} style={styles} />;
};

方案3：适配普通CSS文件场景 #

如果你用的是普通CSS文件而非CSS-in-JS对象，可以配合CSS Modules调整逻辑：

// Button.module.css
.root { background-color: blue; }

// applyStyles.js
const applyStyles = (Component) => (props) => {
  const [classNames, setClassNames] = useState({});
  useEffect(() => {
    import(`./${Component.name}.module.css`)
      .then(module => setClassNames(module.default))
      .catch(err => console.warn(err));
  }, [Component.name]);

  // 把样式类名通过className传递给组件
  return <Component {...props} className={classNames.root || ''} />;
};

内容的提问来源于stack exchange，提问作者Steven Daniel Anderson