CSS 个带有 Sass 和 Gatsby 的模块

Question

如何在条件 classes 上将 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 class 按预期添加和删除。问题是 CSS 没有应用到它：背景仍然是绿色。查看 Chrome 网络选项卡，我可以看到样式应用于 class 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 class 的样式？

Answer 1

以下将起作用：

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

不同的是我把isOpen换成了[menuStyles.isOpen]（方括号代表computed property names）。

就像 menu 一样，CSS 规则 isOpen 也有一个动态的、局部作用域的名称，因此您需要确保从 CSS 中导入它的名称模块到。

CSS 个带有 Sass 和 Gatsby 的模块

CSS modules with Sass and Gatsby

sass

css-modules

gatsby