Невозможно изменить метку на входе: проверено

Question

Я пытаюсь следовать этому примеру (https://codesandbox.io/s/oYQ21A4wz) в увеличенном виде и действительно пытаюсь выяснить, как изменить метку ввода в состоянии: checked для стилевого компонента в React.Я использую 4.2 стилевых компонентов. Любая помощь будет С благодарностью, так как я смотрю на это в течение нескольких дней.

Я могу заставить родительские селекторы работать в других случаях (например: hover), но по какой-то причине я не могу нацелить ярлык от его дочернего элемента.

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} означает, что «когда я отмечен, у компонента метки родного брата прямо подо мной будут эти стили»; * 1005 то есть *

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

Однако ваша структура компонентов выглядит следующим образом:

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

Вы должны изменить его на структуру, указанную выше.

---

Также обратите внимание, что вы не должны объявлять ваши стилизованные компоненты внутри другого компонента, это сильно ухудшит производительность. Вместо этого вы должны сделать:

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

const CheckBoxDoors = props => ...