样式化的组件选择上一个兄弟

Posted 2023-03-16

【中文标题】样式化的组件选择上一个兄弟

【英文标题】：Styled components select previous sibling

【发布时间】：2021-02-04 20:11:52

【问题描述】：

我正在构建一个表单，并尝试在输入聚焦后更改标签的颜色。 我正在使用样式化组件参考 api，如果我将标记作为输入后跟标签，我会看到它有效，这不是我的情况。 我的标记是

<FieldWrapper>
  <StyledLabel htmlFor=id && id>label</StyledLabel>
  <StyledInput
    type=type
    id=id && id
    autoComplete=autoComplete
    ...rest
  />
</FieldWrapper>

我的样式化组件文件是这样的：

const FieldWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position:relative;
  & $StyledInput:focus + $StyledLabel 
   color: red;
  
`;

有没有办法做到不必改变标记的顺序？从标记的角度来看，在标签之前输入是违反直觉的。

谢谢。

【参考方案1】：

首先你需要把输入放在标签之前。您可以使用 flex-direction:row-reverse;在输入前显示标签。然后，不要使用引用变量 $StyledLabel，只需使用输入和标签，就像在这个例子中：

<FieldWrapper>
  <StyledInput
    type=type
    id=id && id
    autoComplete=autoComplete
    ...rest
  />
  <StyledLabel htmlFor=id && id>label</StyledLabel>
  
</FieldWrapper>

然后在样式中：

const FieldWrapper = styled.div`

  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  width: 100%;
  position:relative;

  input:focus ~ label
    color: green;
  
  
`;