动态导入：导入css模块，具体取决于

Question

我想根据通过组件的道具动态导入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>
  )
}

它变得非常混乱，所以我想根据isHeader属性导入不同的CSS模块

我将如何以及在何处这样做？它应该在组件内部，但是如果使用useEffect，我将如何引用css部分

编辑：

我尝试过此

useEffect(() => {
    if (isheader) {
      import css from './MenuItemHeader.module.styl'
    } else {
      import css from './MenuItemFooter.module.styl'
    }
  });

但是我收到导入语句应以文件开头的错误

Answer 1

您可以尝试这个

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

/* ... */

isHeader ? firstCssModule.someClass secondCssModule.someClass

带有类名：

const firstClasses =
    classNames(firstCssModule.someClass, {[firstCssModule.someOtherClass]: isHeader})

const secondClasses = classNames(secondCssModule.someClass, {[secondCssModule.someOtherClass]: isHeader})

const mixedClasses = classNames(firstCssModule.someClass, {[secondCssModule.someOtherClass]: isHeader})