我可以在 React 中导入组件的顶级标签上应用 css-module 类吗

编程问答 2022-05-25

问题描述

我什至不知道如何在文档中搜索此问题。 我会尽力描述当前的结果和预期的结果。

我有一个“标题”组件，我正在使用 scss 模块对其进行样式设置。 在这个组件中，我利用了其他组件，我想将这个组件中定义的样式应用到它们而不用附加标签（即“div”）包围它们（我的 HTML 树已经太深）但它不起作用。

代码：

import headerStyles from "./header.module.scss"
import MobileNavbar from "../MobileNavbar/MobileNavbar"
import DesktopNavbar from "../DesktopNavbar/DesktopNavbar"
import SocialLinks from "../SocialLinks/SocialLinks"
const Header = () => {
  return (
    <header className={headerStyles.headerBar}>
      <MobileNavbar
        navItems={navItems}
        toggleMenuLocation={toggleMenu}
        isMenuOpen={isMobileMenuOpen}
        socialLinks={socialLinks}
      />
      <div className={headerStyles.logo}>
        <Link to="/">
          <img src={logo} alt="__logo" width="210" height="70" />
        </Link>
      </div>
      <DesktopNavbar className={headerStyles.navBar} navItems={navItems} />
      <SocialLinks
        socialLinks={socialLinks}
        groupClass={headerStyles.socialLinksGroup}
        linkClass={headerStyles.socialLink}
      />
    </header>
  )
}

例如，DesktopNavbar 组件代码是这样的：

<nav className={`${DesktopNavbarStyles.desktopNavBar} `}>
      <ul>
        ...
      </ul>
    </nav>

但最终呈现的 HTML 代码是这样的：

<nav class="DesktopNavbar-module--desktop-nav-bar--3sXr5">
  <ul>
     ...
  </ul>
</nav>

如您所见，标签中缺少“header-nav-bar--...”类。

所以最好我想看到这个：

<nav class="DesktopNavbar-module--desktop-nav-bar--3sXr5 Header-module--nav-bar--23sdC4">
  ...
</nav>

这可能吗？有没有办法在导出的组件上应用样式（在这种情况下），以便在其顶级标签上应用样式？ 有没有其他方法可以实现这一目标？

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-modulesreact-css-modulesreactjsreactjsreactjsreactjs