为什么CSS模块样式未应用到react子组件列表中的第一个组件上？

Question

[我正在使用Gatsby构建此电子商务网站，主要是使用CSS模块（某些组件还有一些Material-UI）来设计我的React组件的样式。

我的网站可以按预期的方式工作，但是在将网站部署到Netlify后，在生产中，当我刷新页面或访问该页面的url（例如， www.mywebsite.com/cart）从外部网站访问并重定向到该URL。

但是有趣的是，这仅发生在列表中的第一个CartItem组件上（或者如果只有一个CartItem的话）。所有后续CartItem的样式均正常工作。

这里，我的购物车呈现CartItems列表（如果存在）：

import React, { useContext } from "react";
import { Link } from "gatsby";

import CartContext from "../contexts/CartContext";
import CartItem from "./CartItem";
import Checkout from "./Checkout";
import styles from "./Cart.module.scss";

const CartPage = () => {
  const { cart } = useContext(CartContext);

  const { cartHeader, basket } = styles;

  const renderCartItems = () => {
    if (cart && cart.length !== 0) {
      return cart.map(({ sku, quantity, name, size, price, image, slug }) => {
        return (
          <CartItem
            key={sku}
            sku={sku}
            quantity={quantity}
            name={name}
            size={size}
            price={price}
            image={image}
            slug={slug}
          ></CartItem>
        );
      });
    }

    return (
      <div>
        Your cart is empty! Continue shopping{" "}
        <Link style={{ color: "#9c7451", fontWeight: "bold" }} to="/store/">
          here.
        </Link>
      </div>
    );
  };

  return (
    <div>
      <div className={cartHeader}>
        <h1>Shopping Cart</h1>
      </div>
      <div className={basket}>{renderCartItems()}</div>
      {cart && cart.length !== 0 && <Checkout />}
    </div>
  );
};

export default CartPage;

这里是CartItem：

import React, { useContext } from "react";
import Img from "gatsby-image";

import CartContext from "../contexts/CartContext";
import styles from "./CartItem.module.scss";

const CartItem = props => {
  const { onRemoveFromCart } = useContext(CartContext);

  const {
    item,
    section1,
    itemImage,
    productInfo,
    removeItem,
    section2,
  } = styles;

  return (
    <div className={item}>
      <div className={section1}>
        <Img
          className={itemImage}
          fluid={props.image.childImageSharp.fluid}
          alt={props.name}
        />
        <div className={productInfo}>
          <h4>{props.name}</h4>
          <div
            className={removeItem}
            onClick={() => onRemoveFromCart(props.sku)}
            onKeyDown={() => onRemoveFromCart(props.sku)}
            role="button"
            tabIndex={0}
          >
            Remove
          </div>
        </div>
      </div>
      <div className={section2}></div>
    </div>
  );
};

export default CartItem;

这里是CartItem的CSS模块

.item {
  margin-top: 30px;
  border-top: 1px solid #dedede;
  padding-top: 30px;

  .section1 {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    grid-gap: 1rem;

    .itemImage {
      &:hover {
        opacity: 0.8;
      }
    }

    .productInfo {
      padding-top: 1.85rem;

      h4 {
        font-weight: bold;
      }

      .removeItem {
        display: inline-block;
        margin-top: 0.5rem;
        padding: 2px 2px 2px 0;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .section2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  .item {
    display: grid;
    grid-template-columns: 1fr 1fr;

    .section1 {
      grid-gap: 2rem;

      .productInfo {
        padding-top: 0;
      }
    }

    .section2 {
      justify-content: space-between;
      align-items: flex-start;

      .total {
        text-align: right;
      }
    }
  }
}

如果您要对其进行测试，请访问这里的网站：https://www.roxannecamilledesigns.com

重现问题：

1. 转到商店部分，单击商品并添加到购物车
2. 从导航栏或添加项目时显示的弹出窗口导航至购物车
3. 看到CartItem样式完美地起作用
4. 刷新页面，查看CartItem的样式是否未设置
5. 转到任何其他页面，然后使用导航栏在内部单击回到购物车，然后确认所有内容均已修复。
6. 如果在购物车中有两个单独的项目时重复此过程，您会注意到只有第一个组件存在样式问题。

如上所述，在开发中一切正常。在生产中，当使用到购物车的内部Nav链接（例如来自Navbar）时，所有样式都可以正常工作。但是刷新页面只会使第一个组件的样式混乱。

这里是一个示例，说明购物车应包含两个项目：

[如果您需要我的更多信息来帮助解决此问题，请告诉我。谢谢！！

我正在使用Gatsby构建此电子商务网站，主要是使用CSS模块（以及一些组件的Material-UI）来样式化我的React组件。我的网站在开发中可以正常工作，但是...

Answer 1

找出了解决问题的方法。我将整个CartItem组件的JSX封装在一个div中，该div不使用CSS模块中指定的类。那解决了问题，但是我不确定为什么。