html - 相邻兄弟未获取 CSS 变量值

Question

我有一个 React Header 组件，我使用 styled-components 设置样式。我有一个选择器，我用它来选择标题的下一个兄弟并给它一个顶部填充以在标题下保留一个空白空间，因为它有 position: fixed。当我为这种样式使用正常值时它工作得很好，但是一旦我使用 CSS 变量以便我可以使用媒体查询自定义高度，该变量就不再在同级元素中被解析。这是我的代码:

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

  position: fixed;
  top: 0;

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

  /* Give the next sibling a top padding so text doesn't flow underneath the header */
  + * {
    padding-top: var(--height);
    margin-top: 0;
    border-top: 0;
  }
`;

样式正在应用于 header 本身(高度正常工作)，但兄弟上的 padding-top 在 Chrome 中具有值 var(--height) 这是正常的但当我悬停它时，它不显示任何计算值。

Answer 1

正如@DennisMartinez 所说，

"CSS custom properties work when cascading. What this means is that it'll work on the element in which it's declared and that elements descendants. A sibling is not a descendant, thus you're faced with this issue."

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

我最终声明了变量两次，一次在 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}
  }
`;