ReactJS + 样式组件 + 伪类

Question

是否可以使用伪类来为组件设置样式。我有一个复选框，它应该显示 SVG 图像:选中/未选中以将状态显示为选中/未选中。我可以通过从 parent 那里传递 Prop 来做到这一点。但我被告知只有 css(样式组件)才有可能。
我的代码的一部分:

 const CheckboxInput = styled.input`
  &:checked, &:not(:checked) {
  display: none;
 }`;

const CheckboxLabel = styled.label`
  cursor: pointer;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
`;

function Checkbox(props) {
  return (
    <CheckboxLabel htmlFor="id" onChange={() => { props.onchange(); }}>
      <CheckboxInput id="id" type="checkbox" checked={props.checked} value="cb" name="cb" />
      <Span><SVG glyph={checked} width={17} height={17} /></Span>
      <Span><SVG glyph={unchecked} width={17} height={17} /></Span>
      {props.children}
    </CheckboxLabel>
  );
}

Answer 1

在 styled-components 中使用以下选择器您可以使用输入/复选框的状态来修改仅使用 CSS 的样式:

  &:checked + ${Label} {
    /* your CSS */
  }

这是一个完整的例子:

import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';


const Label = styled.label`
  background: red;
  display: block;
  padding: 1rem;
`;

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

const App = () => (
  <div>
    <Input id="input" type="checkbox" />
    <Label for="input" />
  </div>
);

render(<App />, document.getElementById('root'));

你可以在这里看到它的预览: https://codesandbox.io/s/oYQ21A4wz

这应该给你一个基本的想法如何只用 CSS 改变样式。