Question

我试图按照反向选择器＆＃39;模式详细here。以下两个都嵌套在label标记内。单击标签可激活输入，但FakeInput中的条件样式未应用。

有什么想法吗？

export const CheckboxInput = styled.input`
  position: absolute;
  opacity: 0;
`;

export const FakeInput = styled.div`
  height: 2.2rem;
  width: 2.2rem;
  margin-right: 1rem;
  border-radius: 0.2rem;
  background-color: #333;
  color: #333;
  font-size: 1.8rem;

  ${CheckboxInput}:checked & {
      background-color: green;
      color: white;
  }
`;

正在使用此功能进行渲染：

renderInputRow({ key, name }) {
    const inputRow = (
        <CheckboxLabel key={key}>{name}
            <CheckboxInput type="checkbox" name={key} />
            <FakeInput className="fa fa-check" />
        </CheckboxLabel>
    );

    return inputRow;
}

Answer 1

我们在网站上的示例很幸运没有错，但这里的选择器存在问题：

${CheckboxInput}:checked &

它自己的选择器完全正常，并且表示“检查时CheckboxInput的任何子项”，但您的代码包含：

<CheckboxInput type="checkbox" name={key} />
<FakeInput className="fa fa-check" />

所以你要说“CheckboxInput的任何兄弟姐妹”，这将是：

${CheckboxInput}:checked ~ &

我已快速将您的代码粘贴到CodeSandbox中以确认其有效： https://codesandbox.io/s/rkmNRByE4

希望这会有所帮助：）

样式化组件，输入元素上的反向选择器模式

1 个答案: