styled-components中提前声明的父组件hover时修改后续定义子组件样式的解决方案咨询

我遇到过类似的场景，当子组件在父组件之后定义时，确实没法直接在父组件的样式里引用子组件的Styled对象。这里有几个可靠的解决方案：

方案1：使用自定义类名选择器（最直接） #

给子组件添加一个自定义类名，然后在父组件的hover状态下通过类名选中它，完全不依赖组件的Styled引用：

// 先定义父组件
const PlanContainer = styled.div<Props>`
  flex: 1 1 0px;
  
  &:hover {
    // 通过自定义类名选中子组件
    .plan-body {
      flex: 1 1 100%;
    }
  }
`;

// 几百行后定义子组件，添加类名
const PlanBody = styled.div.attrs({ className: 'plan-body' })`
  flex: 1 1 0px;
`;

或者也可以直接在子组件的样式里写类选择器（效果一样）：

const PlanBody = styled.div`
  flex: 1 1 0px;
  &.plan-body {} // 仅用于标记类名，也可以留空
`;

方案2：使用CSS变量（最优雅） #

利用CSS变量的继承特性，父组件定义变量并在hover时修改，子组件直接使用这个变量，完全不需要额外的选择器：

// 父组件定义并控制CSS变量
const PlanContainer = styled.div<Props>`
  flex: 1 1 0px;
  // 默认变量值
  --plan-body-flex: 1 1 0px;
  
  &:hover {
    // hover时更新变量
    --plan-body-flex: 1 1 100%;
  }
`;

// 子组件使用变量
const PlanBody = styled.div`
  flex: var(--plan-body-flex);
`;

这个方法的优势是代码更简洁，没有额外的类名，完全利用CSS原生特性，对SSR也更友好。

为什么你之前的css关键字方案无效？ #

你之前尝试的写法是把PlanBodyStyles作为子组件的一部分，但父组件里的${PlanBodyStyles}是空的，而且这种写法相当于把hover样式直接注入到子组件中，而不是父组件hover时才触发。正确的css关键字用法其实可以结合方案1，但没必要——类名或CSS变量的方案已经足够简单。

不推荐的方案：延迟引用 #

虽然可以通过声明变量后赋值的方式延迟引用子组件，但这种写法容易引发渲染时机问题（比如SSR场景下可能失效），所以不推荐：

let planBodyHoverStyles;

const PlanContainer = styled.div<Props>`
  flex: 1 1 0px;
  &:hover {
    ${() => planBodyHoverStyles || ''}
  }
`;

// 几百行后
const PlanBody = styled.div`
  flex: 1 1 0px;
`;

// 赋值hover样式
planBodyHoverStyles = css`
  ${PlanBody} {
    flex: 1 1 100%;
  }
`;

总结：优先选择CSS变量方案，其次是类名选择器，这两种方法都能完美解决你的问题，且代码清晰可靠。

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