Reactjs 动态导入：根据需要导入css模块

我想根据通过组件传递的道具动态导入css模块

我的js文件是这样的

import css from './MenuItem.module.styl'
/* .... */
const MenuItem = ({ node, isTitle, isHeader, pathname, hoveredItem }) => {      

  const linkClasses =
    classNames(css.someClass, {[css.someOtherClass]: isHeader})

  const subItemsContainerClasses = classNames(css.someClass, {[css.someOtherClass]: isHeader})

  const itemsContainerClasses = classNames(css.someClass, {[css.someOtherClass]: isHeader})



  return (
    <div className={itemsContainerClasses}>
      /* etc */
    </div>
  )
}

但是我得到一个错误，导入语句应该在文件的请求处

我试过了

const [css, setCss] = useState({});

useEffect(() => {
    if (isHeader) {
      import('./MenuItemHeader.module.styl')
        .then((response) => {                    
          setCss(response) 
        })
    } else {    
      import('./MenuItemFooter.module.styl')
        .then((response) => {                    
          setCss(response) 
        })
    }
  });

我没有收到任何错误，但是没有应用样式

您可以试试这个

import  firstCssModule from './MenuItem.firstModule.styles';
import  secondCssModule from './MenuItem.secondModule.styles';

/* ... */

isHeader ? firstCssModule.someClass secondCssModule.someClass

类名

const firstclass=
类名（firstCssModule.someClass，{[firstCssModule.someOtherClass]：isHeader}）
const secondClasses=classNames（secondCssModule.someClass，{[secondCssModule.someOtherClass]：isHeader}）
const mixedClasses=类名（firstCssModule.someClass，{[secondCssModule.someOtherClass]：isHeader}）

字典和计算属性

const styles={
第一个：firstCssModule，
第二个：第二个CSSModule
}
const currentModule='first'；
样式[currentModule].someClass
样式[currentModule].someOtherClass

有了类名，你就可以得到类似这样的东西了

{[styles[currentModule].someOtherClass]：isHeader}

验证

const getStyles=moduleName=>{
if（样式中的moduleName）{
返回样式[moduleName]；
}否则{
/*moduleName不存在，请执行某些操作
（例如，返回默认值或抛出错误）*/
返回styles.first；//默认值
}
/* ... */
getStyles（currentModule）.someClass；

classnames

在这种情况下：

{[getStyles（currentModule）.someOtherClass]：isHeader}

如果只有几个类，我会这样做，但是有很多类，所以我必须将此条件添加到所有类中。如果没有其他方法，我可能会这样做。谢谢you@user3808307我更新了我的答案。我希望这将有助于现在添加的验证。即使这会影响性能和用户体验，你真的想动态加载css文件吗？想象一下，您的用户通过单击按钮必须等待所有css文件加载并应用（阅读主题“关键渲染路径”）。但您可以导入这两个文件，然后根据条件使用它们。是的，Iit会增加首次加载，但不会影响用户使用站点时的加载。

import  firstCssModule from './MenuItem.firstModule.styles';
import  secondCssModule from './MenuItem.secondModule.styles';

/* ... */

isHeader ? firstCssModule.someClass secondCssModule.someClass