我想根据通过组件的道具动态导入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'
}
});
但我收到一个错误，即导入语句应以文件开头
我试过了
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 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 }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句