Next.js类名异常问题：生成类名与实际不符如何解决？

你遇到的是styled-jsx（Next.js内置的CSS-in-JS方案）的正常特性——类名哈希重写。

为什么类名不一样？ #

styled-jsx会自动对组件内定义的CSS类名添加唯一哈希后缀，目的是实现组件级样式隔离，避免不同组件的同名样式互相干扰。你在代码里写的.scroller类，最终会被编译成类似scroller__abc123的哈希类名，而你手动生成的scroller-i934CUja5Y是原样输出的，所以浏览器渲染时看到的类名和你控制台打印的不一致（控制台打印的是你生成的原始值，但scroller已经被重写了）。

解决办法分两种情况： #

• 只是用随机类做标识，不需要加样式：
  这种情况完全没问题，scroller类被哈希是正常的，你生成的随机类会原样出现在DOM上，控制台打印的原始值和DOM上的随机类是一致的，只是scroller被重写了而已。

• 需要给随机类名添加样式：
  如果你要给generated对应的类写样式，需要在styled-jsx中用模板字符串注入这个类名，让styled-jsx一起处理哈希：

  <style jsx>{`
    .scroller {
      width: calc(100vw - .5rem) !important;
      margin-left: calc(-1 * var(--page-padding));
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      padding: 1rem 0;
      gap: 2rem;
      scroll-behavior: auto;
    }
  
    .scroller::-webkit-scrollbar {
      display: none;
    }
  
    .${generated} {
      /* 这里写你给这个随机类的样式 */
    }
  `}</style>
  

• 不想让scroller类被哈希（全局样式）：
  如果希望scroller类保持原始名称，不被哈希重写，可以用:global()包裹样式：

  <style jsx>{`
    :global(.scroller) {
      width: calc(100vw - .5rem) !important;
      margin-left: calc(-1 * var(--page-padding));
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      padding: 1rem 0;
      gap: 2rem;
      scroll-behavior: auto;
    }
  
    :global(.scroller::-webkit-scrollbar) {
      display: none;
    }
  `}</style>
  

  这样scroller类就会保持原始名称，和你控制台打印的一致，但要注意这种样式是全局生效的，可能会和其他组件的样式冲突。

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