Question

我正在编写一个带有样式化组件的React应用程序，为我的应用程序创建了一个可重用组件库，但是当我尝试为输入旁边的标签赋予属性时，遇到姐妹组件之间的继承问题。输入是必需的，但不起作用。我尝试过：

FirebaseOptions.defaultOptions()?.deepLinkURLScheme = org.*******.*****

结果仅返回不带*

的形式

有人知道当输入具有必需的HTML属性时如何从样式化组件中进行检测，并显示*

Answer 1

样式组件中的伪选择器的工作方式与CSS中的选择器相同。（或更确切地说，是Sass）。
因此，您可以按照以下方式进行操作：

const Wrapper = styled.div`
label {
    &:after {
    content: "${p => p.required && "*"}";
    color: red;
  }
}`;
const Form = () => {
return (
    <Wrapper required>
    <label>Mi Label 1</label>
    <input />
    </Wrapper>
);
};

但是，如果您不想将输入元素的prop传递给其父元素，则可以这样做：

const Wrapper = styled.div`
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
`;
const Example = styled.input`
+ label {
      &:after {
        content: "${p => p.required && "*"}";
        color: red;
      }
    }
`;
const Form = () => {
  return (
    <Wrapper required>
      <Example />
      <label>My Label 1</label>
    </Wrapper>
  );
};

更多资源信息：
Before and After pseudo classes used with styled-components

https://github.com/styled-components/styled-components/issues/388

https://github.com/styled-components/styled-components/issues/74

样式元素：Herencia

1 个答案: