SASS子样式未应用到JSX元素的问题求助

你的样式不生效的核心原因是CSS Modules的类名哈希机制：
你写的.home .gutterLeft选择器，是在找类名为gutterLeft的元素，但实际React编译后，组件的类名会被加上唯一哈希后缀（比如Gutter_gutterLeft__PHEQH），所以原始类名gutterLeft并不存在于DOM中，选择器自然匹配不到。

方案一：使用:global()标记全局类，保留模块化嵌套写法 #

修改index.module.scss，用:global()包裹全局的home类选择器，这样内部的gutterLeft和gutterRight会被编译成带哈希的模块化类名：

.gutterLeft {
  padding-left: var(--gutter-h);
}

.gutterRight {
  padding-right: var(--gutter-h);
}

// 用:global()标记home是全局类，内部的类仍使用模块化哈希名
:global(.home) {
  .gutterLeft {
    padding-left: 0;
  }
  
  .gutterRight {
    padding-right: 0;
  }
}

编译后生成的CSS会自动匹配DOM中的哈希类名，样式即可生效。

方案二：给Gutter组件新增首页专属props，动态切换类 #

如果不想依赖全局类嵌套，可以给组件加一个首页标识属性，根据状态切换样式：

1. 修改SCSS，新增首页专属样式类：

.gutterLeft {
  padding-left: var(--gutter-h);
}

.gutterRight {
  padding-right: var(--gutter-h);
}

// 首页专属样式
.gutterLeftHome {
  padding-left: 0;
}

.gutterRightHome {
  padding-right: 0;
}

2. 修改Gutter组件的JSX，增加isHome props并动态选择类：

import React, { forwardRef, Ref } from 'react';
import classes from './index.module.scss';

type Props = {
  left?: boolean;
  right?: boolean;
  className?: string;
  isHome?: boolean; // 新增首页标识props
  children: React.ReactNode;
  ref?: Ref<HTMLDivElement>;
};

export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
  const { left = true, right = true, className, isHome = false, children } = props;

  return (
    <div
      ref={ref}
      className={[
        // 根据isHome选择对应的样式类
        left && (isHome ? classes.gutterLeftHome : classes.gutterLeft),
        right && (isHome ? classes.gutterRightHome : classes.gutterRight),
        className
      ].filter(Boolean).join(' ')}
    >
      {children}
    </div>
  );
});

Gutter.displayName = 'Gutter';

3. 在首页使用Gutter时传入isHome={true}：

<Gutter isHome={true}>
  {/* 首页内容 */}
</Gutter>

内容的提问来源于stack exchange，提问作者gregwhitworth