为什么我可以在 styled-components 上引用组件而其他人不能？

Question

在 styled-components 中，您可以使用此语法 ${Label} 引用另一个 React 组件，但有时可以与某些组件一起使用，而其他组件则不能。

我正在尝试阅读文档 https://www.styled-components.com/docs/advanced#referring-to-other-components，当我开始构建组件时，我无法使用 Label 组件来完成它，只能使用 div 组件。

我将 styled-component 更新到最新的稳定版本。

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

// https://codepen.io/lewisvrobinson/pen/EyZwjR
// VARIABLES // ============================== //
const bgColor = "#424242";
const hlColor = "#2196F3";
const mutedColor = "Black";
const transTime = "300ms";
const width = "320px";

// FORM // ============================== //

const Box = styled.div`
  position: relative;
  margin: 45px 0;
`;

const Input = styled.input.attrs({
  type: "text",
  required: "required"
})`
  background: none;
  color: ${mutedColor};
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: ${width};
  border: none;
  border-radius: 0;
  border-bottom: 1px solid ${mutedColor};
  &:focus {
    outline: none;
  }
  &:focus ~ label,
  &:valid ~ label {
    top: -14px;
    font-size: 12px;
    color: ${hlColor};
  }
  &:focus ~ ${Bar}:before {
    width: ${width};
  }
`;

const Label = styled.label`
  color: ${mutedColor};
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: ${transTime} ease all;
`;

const Bar = styled.span`
  position: relative;
  display: block;
  width: ${width};
  &:before {
    content: "";
    height: 2px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: ${hlColor};
    transition: ${transTime} ease all;
    left: 0%;
  }
`;

const TextField = props => {
  return (
    <Box>
      <Input />
      <Bar></Bar>
      <Label>Name</Label>
    </Box>
  );
};

export default TextField;

正如你在这行中看到的那样

  &:focus ~ label,
  &:valid ~ label 

我正在使用标签库，我想使用我自定义的Label 组件。

我需要这样的工作：

  &:focus ~ ${Label},
  &:valid ~ ${Label} 

奇怪的是在这一行：

  &:focus ~ ${Bar}:before 

栏按预期工作。

Answer 1

这是因为当您在Input 组件中使用${Label} 时，它还不存在。将它移到文件上，它应该可以按预期工作。

示例：https://codesandbox.io/embed/zen-cloud-f8mht