Styled-components不同variant下生成相同CSS类引发样式冲突问题

定义的Typography组件代码如下：

import styled, { css } from "styled-components";

const H4 = css`
  font-family: "Futura";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  color: #3a786a;
`;
const H3 = css`
  font-size: 24px;
`;

const Span = css`
  font-size: 16px;
`;

export const Typography = styled.div`
  #widgetStyles & {
    ${(props) => {
      switch (props.variant) {
        case "h4":
          return H4;
        case "h3":
          return H3;
        case "body1":
          return Span;
        default:
          return css`
            font-size: 14px;
            color: #010101;
          `;
      }
    }}
  }
`;

组件调用方式：

<Typography variant="h4">{label}</Typography>
<Typography variant="h3">{label}</Typography>

实际渲染时，传入不同variant属性的组件被分配了相同的CSS类，导致样式覆盖冲突。

这是styled-components v5及更早版本的静态样式缓存机制导致的：
styled-components计算组件类名时，会优先提取完全静态的样式结构做哈希计算，相同静态结构的组件会复用同一个CSS类。你代码里的#widgetStyles & { ... }是完全固定的静态外层选择器块，虽然块内部写了根据props返回不同样式的动态逻辑，但这部分动态内容不会参与基础类名的哈希计算。最终不管传入什么variant值，所有Typography组件都会被分配同一个类名，后续动态注入的不同样式因为选择器优先级完全相同，会按加载顺序互相覆盖，直接出现样式错乱。

可任选以下一种方案解决问题：

• 方案1：调整样式结构，把外层#widgetStyles &选择器下沉到每个动态返回的CSS片段内部，让每个variant对应的样式块完全独立，styled-components就能正确识别样式差异，为不同variant生成独立类名。
  修复后的代码：

  import styled, { css } from "styled-components";
  
  const H4 = css`
    #widgetStyles & {
      font-family: "Futura";
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 140%;
      color: #3a786a;
    }
  `;
  const H3 = css`
    #widgetStyles & {
      font-size: 24px;
    }
  `;
  
  const Span = css`
    #widgetStyles & {
      font-size: 16px;
    }
  `;
  
  export const Typography = styled.div`
    ${(props) => {
      switch (props.variant) {
        case "h4":
          return H4;
        case "h3":
          return H3;
        case "body1":
          return Span;
        default:
          return css`
            #widgetStyles & {
              font-size: 14px;
              color: #010101;
            }
          `;
      }
    }}
  `;
  

• 方案2：升级styled-components到v6及以上版本，v6版本重构了动态样式的类名生成逻辑，即使动态插值写在静态嵌套选择器内部，也会根据props的差异生成独立类名，不需要调整原有样式结构就能解决冲突问题。
• 方案3：使用styled-components推荐的transient props（临时属性），即把props名加$前缀（比如把variant改成$variant），可以帮助样式引擎更准确识别动态属性，减少静态样式错误缓存的概率，这个方案在v5版本下建议和方案1搭配使用，稳定性更高。

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