Dynami c import: импорт модуля css в зависимости - PullRequest
Новая
       36

Dynami c import: импорт модуля css в зависимости

1 голос
/ 31 марта 2020

Я хотел бы динамически импортировать модуль 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>
  )
}

Это очень грязно, поэтому я хотел бы импортировать другой модуль css в зависимости от isHeader prop

Как и где мне это сделать? Он должен быть внутри компонента, но если я использую Effect, как я буду ссылаться на css part

Edit:

Я пробовал это 

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

И я не получаю ошибок, но стили не применяются

1 Ответ

1 голос
/ 31 марта 2020

Вы можете попробовать это 

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