时间戳

首页 > 解决方案 > 带有 Sass 和 Gatsby 的 CSS 模块

sass - 带有 Sass 和 Gatsby 的 CSS 模块

问题描述

Sass 如何在 Gatsby 的条件类中与 CSS 模块一起使用？

我尝试了以下方法：

menu.js

import menuStyles from './menu.module.scss';
import classNames from 'classnames';

const Menu = ({ open }) => {
  return (
    <nav className={classNames(menuStyles.menu, { isOpen: open })}>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </nav>
  );
};

menu.module.scss：

.menu {
  background: green;

  &.isOpen {
    background: blue;
  }
}

一个onClick事件更新了open道具，我可以看到isOpen按预期添加和删除的类。问题是 CSS 没有应用到它：背景仍然是绿色的。查看 Chrome 网络选项卡，我可以看到样式应用于类menu-module--isOpen--DyE73，而不仅仅是isOpen：

.menu-module--menu--2cKbx {
  background: green;
}
.menu-module--menu--2cKbx.menu-module--isOpen--DyE73 {
  background: blue;
}

当不使用 CSS 模块 (import './menu.scss';和<nav className={classNames('menu', { isOpen: open })}>) 时，样式在这两种情况下都会正确应用。

Sass 如何与 CSS 模块一起使用来设置条件isOpen类的样式？

标签： sassgatsbycss-modules

解决方案

以下将起作用：

<nav className={classNames(menuStyles.menu, { [menuStyles.isOpen]: open })}>

不同之处在于我替换isOpen为[menuStyles.isOpen]（代表计算属性名称的方括号）。

就像 一样menu，CSS 规则isOpen也有一个动态的、本地范围的名称，因此您需要确保将其名称从 CSS 模块导入到。

推荐阅读