动态导入：导入 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 模块

我将如何以及在何处执行此操作？它应该在组件内部，但如果我使用 Effect，我将如何引用 css 部分

编辑：

我试过了

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

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

我试过了

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

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

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

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})

字典和计算属性

const styles = {
  first: firstCssModule,
  second: secondCssModule
}

const currentModule = 'first';

styles[currentModule].someClass
styles[currentModule].someOtherClass

有了类名，你可以得到这样的东西，没关系。

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

验证

const getStyles = moduleName => {
  if (moduleName in styles) {
    return styles[moduleName];
  } else {
    /* moduleName doesn't exist, do something
(for example, return default or throw an error) */
    return styles.first; // default
  }

/* ... */

getStyles(currentModule).someClass;

classnames 在这种情况下：

{ [getStyles(currentModule).someOtherClass]: isHeader }

动态导入：导入 css 模块取决于

Dynamic imports: importing a css module depending

dynamic-import

reactjs

css-modules

类名

字典和计算属性

验证