如@DennisMartinez所说，

  

“ CSS定制属性在级联时起作用。这意味着它将在声明它的元素和该元素的后代上起作用。同级不是后代，因此您会遇到此问题。”

这意味着很难解决这个问题。我认为以下解决方案可能是最好的，因为上述限制使我们很难想到更好的解决方案。

我最终两次声明了变量，一次是在Header样式内部，一次是在同级选择器内部。如果需要，我可以插值，这样我仍然可以有一个单一的真理来源。我希望通过媒体查询来更改变量，因此我也两次在与变量相同的位置声明了此变量。如果需要，可以将此复制粘贴提取到字符串中并进行插值。

代码如下：

export const S_Header = styled.header<HeaderProps>`
  --height: 20vw;

  position: fixed;
  top: 0;

  width: 100vw;
  height: var(--height);

  @media (${devices.medium}) {
    --height: 10vw;
  }

  @media (${devices.large}) {
    --height: 5vw;
  }

  /* Give the next sibling a top padding so it doesn't start underneath the header */
  + * {
    --height: 20vw;

    padding-top: var(--height);
    margin-top: 0;
    border-top: 0;

    @media (${devices.medium}) {
      --height: 10vw;
    }

    @media (${devices.large}) {
      --height: 5vw;
    }
  }
`;

我也使用上面提到的内插法编写了此代码：

const heightVar = "--height: 20vw;";

const mediaQuery = ` 
  @media (${devices.medium}) {
    --height: 10vw;
  }

  @media (${devices.large}) {
    --height: 5vw;
  }
`;

export const S_Header = styled.header<HeaderProps>`
  ${heightVar}

  position: fixed;
  top: 0;

  width: 100vw;
  height: var(--height);

  z-index: 98;

  transform: ${(props): string =>
    props.visible === false ? "translateY(-100%)" : "none"};

  background-color: ${(props): string =>
    props.atTop ? "transparent" : props.bgColor};

  transition: transform 0.35s,background-color 0.35s ease-in-out;

  ${mediaQuery}

  /* Give the next sibling a top padding so it doesn't start underneath the header */
  + * {
    ${heightVar}

    padding-top: var(--height);
    margin-top: 0;
    border-top: 0;

    ${mediaQuery}
  }
`;