如何让styled-components为每个元素生成独立CSS解决布局错位问题

核心原因 #

你当前定义的styled组件默认复用同一份静态CSS规则，所有实例共享相同的媒体查询计算结果，就会出现小尺寸元素按最大规则渲染的问题。

可行解决方法 #

• 用动态props注入独有参数，让styled-components为不同参数的实例自动生成唯一CSS类
  修改你的CardBox组件代码如下：

export const CardBox = styled.div`
  display: flex;
  width: ${px2vw(500, 500)};
  /* 接收自定义参数计算高度，无传参用默认值 */
  min-height: ${props => px2vw(props.minHeightBase ?? 200, 500)};
  padding-top: ${px2vw(20)};
  padding-bottom: 0;
  margin-left: 3%;
  max-width: 102%;
  height: 100%;
  padding-right: 0px;
  flex-basis: 200px;

  @media (min-width: 768px) {
    width: ${px2vw(320, 768)};
    min-height: ${props => px2vw(props.minHeightMd ?? 200, 768)};
    padding-bottom: ${px2vw(20)};
    height: 100%;
    margin-left: 0;
    max-width: 100%;
  }

  @media (min-width: 1024px) {
    width: ${px2vw(710)};
    min-height: ${props => props.minHeightLg ?? '30vh'};
    padding-bottom: ${px2vw(20)};
    height: 100%;
    /* 修复原有代码语法错误：此处之前漏写flex属性的属性值 */
  }

  & > a{
    color:rgb(94, 92, 92, 1.0);
  }
  
  & > a:hover{
    color:rgba(94, 92, 92, 1.0);
  }
`

使用时给每个卡片实例传入对应尺寸的参数即可：

// 小尺寸卡片实例
<CardBox minHeightBase={120} minHeightMd={120} minHeightLg="20vh" />
// 大尺寸卡片实例
<CardBox minHeightBase={250} minHeightMd={250} minHeightLg="40vh" />

• 间隙异常优化：把固定计算的margin值替换为外层容器的gap属性控制子元素间距，无需每个元素单独计算边距，适配性更强。
• 完全独立CSS规则生成：如果不需要复用任何CSS规则，可以给每个组件实例传入唯一的data-id属性，配合属性选择器写样式，一般动态props方案已经足够解决问题，无需额外操作。

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