ReactJS + gestylt Komponenten + PseudoClasses

Question

Ist es möglich, Pseudoklassen für das Styling von Komponenten zu verwenden. Ich habe ein Kontrollkästchen, das SVG-Bild anzeigen soll: aktiviert/nicht markiert für die Anzeige des Status als ausgewählt/nicht ausgewählt. Ich kann das tun, indem ich Requisiten von Eltern übergebe. Aber mir wurde gesagt, dass es nur durch css (gestylte Komponenten) möglich ist. Teil meines Code:

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

Mit Selektor folgenden in styled-components Sie den Zustand der Ein-/Checkbox können den Stil mit nur CSS ändern:

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

Hier ist ein vollständiges Beispiel:

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')); 

Sie können eine Vorschau sehen sie hier: https://codesandbox.io/s/oYQ21A4wz

Dies sollte Ihnen eine grundlegende Idee geben, wie Sie den Stil nur mit CSS ändern können.