Question

我试图以更大的形式遵循此示例（https://codesandbox.io/s/oYQ21A4wz），并且确实在努力找出如何在React中的样式化组件的：checked状态下更改输入的标签。我正在使用4.2的样式组件。我一直在盯着这几天，我们将不胜感激。

在其他情况下（例如，悬停），我可以使父选择器起作用，但是由于某种原因，我似乎无法从其子对象定位Label。

const CheckBoxDoors = props => {
  const Label = styled.label`
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(139, 139, 139, 0.3);
    color: #adadad;
    border-radius: 25px;
    padding: 1px 4px;
    margin: 1px;
    white-space: nowrap;
  `;
  const Input = styled.input`
    &:checked + ${Label} {
      background: blue;
    }
  `;

  return (
    <div className="form-group, checkbox">
      <CheckboxContainer>
        <CheckboxTitle>{props.title}</CheckboxTitle>
        <CheckboxGroup>
          {props.options.map(option => {
            return (
              <Label key={option} className="checkbox-inline">
                <Input
                  id={props.value}
                  name={props.name}
                  onChange={props.handleChange}
                  value={props.name + ' ' + option}
                  checked={
                    props.selectedOptions.indexOf(props.name + ' ' + option) >
                    -1
                  }
                  type="checkbox"
                />
                {option}
              </Label>
            );
          })}
        </CheckboxGroup>
      </CheckboxContainer>
    </div>
  );
};

Answer 1

检查一下这个：

const Input = styled.input`
  &:checked + ${Label} {
    background: blue;
  }
`;

此规则&:checked + ${Label}的意思是“当我被选中时，我下面的同级Label组件将具有这些样式”；即

<>
  <Input id={id}... />
  <Label htmlFor={id}... />
</>

但是，您的组件结构如下：

<Label>
  <Input ... />
</Label>

您必须将其更改为上述结构。

还请注意，您不应在另一个组件中声明样式化的组件，否则会严重影响性能。相反，您应该这样做：

const Input = styled.input` ... `
const Label = styled.label` ... `

const CheckBoxDoors = props => ...

无法更改输入的标签：已选中

1 个答案: