为何CSS/Sass Modules在第三方组件react-horizontal-scrolling-menu中失效？

问题场景 #

在使用第三方组件react-horizontal-scrolling-menu时，通过Sass Modules给renderItem函数内的元素设置样式完全不生效，但改用普通全局CSS却能正常工作。且ScrollMenu组件外的其他元素使用Sass Modules没有任何问题。

Sass Modules无效的代码示例 #

<ScrollMenu
  selected={selected}
  scrollToSelected={true}
  data={items && items.map((item: any) => renderItem(item))}
/>

import styles from './index.module.scss';

const renderItem = (item: any) => (
    <div
      onClick={() => {
        handleClickScroll(item.id);
      }}
      key={item.id}
      className={styles['my-item']}
    >
      <img style={imgStyle} src={item.image} alt="loyalty-img" />
      <div className="item-title">{item.name}</div>
    </div>
);

普通CSS生效的代码示例 #

import './index.css' 

const renderItem = (item: any) => (
    <div
      onClick={() => {
        handleClickScroll(item.id);
      }}
      key={item.id}
      className="my-item"
    >
      <img style={imgStyle} src={item.image} alt="loyalty-img" />
      <div className="category-container-items-title">{item.name}</div>
    </div>
);

原因分析 #

• Sass Modules的作用域隔离特性：Sass Modules会自动为类名添加唯一哈希后缀（例如my-item_xyz789），实现样式的局部作用域隔离。但react-horizontal-scrolling-menu内部可能会对传入data的元素进行二次包装、DOM结构修改，或者组件内部逻辑覆盖了带有哈希后缀的类名，导致你的模块样式无法作用到目标元素上。
• 第三方组件的样式优先级问题：该组件内部可能默认使用全局类名来控制子元素样式，且这些内部类名的CSS优先级高于你通过Sass Modules生成的哈希类名，最终导致你的样式被覆盖。

解决办法 #

1. 用:global()伪类突破模块作用域 #

在Sass Modules文件中，用:global()包裹需要全局生效的类名，让其不被添加哈希后缀，这样就能和普通CSS一样正常作用：

// index.module.scss
:global(.my-item) {
  // 自定义样式
  padding: 8px;
  border-radius: 4px;
}

:global(.item-title) {
  // 标题样式
  font-size: 14px;
  color: #333;
}

此时组件中既可以继续使用className={styles['my-item']}，也可以直接写className="my-item"，两种方式都能生效。

2. 利用组件的自定义类名属性传递 #

查看react-horizontal-scrolling-menu的官方文档，确认是否支持给子元素传递自定义类名的props（比如itemClassName）。如果有这类属性，可以直接传入Sass Modules生成的类名：

<ScrollMenu
  selected={selected}
  scrollToSelected={true}
  data={items && items.map((item: any) => renderItem(item))}
  itemClassName={styles['my-item']}
/>

（注：具体属性名以组件官方文档为准）

3. 改用CSS-in-JS方案 #

如果上述方法都不适用，可以尝试styled-components或emotion这类CSS-in-JS库，直接创建样式化组件，避免类名被第三方组件干扰：

import styled from 'styled-components';

const ItemContainer = styled.div`
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
`;

const ItemTitle = styled.div`
  font-size: 14px;
  color: #333;
  margin-top: 4px;
`;

const renderItem = (item: any) => (
    <ItemContainer
      onClick={() => handleClickScroll(item.id)}
      key={item.id}
    >
      <img style={imgStyle} src={item.image} alt="loyalty-img" />
      <ItemTitle>{item.name}</ItemTitle>
    </ItemContainer>
);

内容的提问来源于stack exchange，提问作者Quang Khải Đàm