Question

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

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

我将样式化组件更新为最新的稳定版本。

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

这是因为在${Label}组件中使用Input时尚不存在。将其移动到文件上，它应该可以正常工作。

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

为什么我可以在样式化组件上引用一个组件，而其他人则不能？

1 个答案: