Стилизованные компоненты для вложенных элементов HTML (React)

Question

Я новичок в стилевых компонентах и ​​хочу знать, как бы вы написали его, учитывая следующий фрагмент HTML:

  <div class="segmentedControlContainer">
    <input type="radio" name="segmentedControlExample" value="1" id="1" />
    <label for="1"> One </label>

    <input type="radio" name="segmentedControlExample" value="2" id="2" />
    <label for="2"> Two </label>

    <input type="radio" name="segmentedControlExample" value="3" id="3" />
    <label for="3"> Three </label>
   <div>

пока что я определил

export const SegmentedControlWrapper = styled.div`
    display: flex;
    width: 100%;
    position: relative;
    z-index: 1;
    user-select: none;
    margin: 0 auto;
    font-size: 16px;
    border-radius: 3px;
    border: solid 1px #bcbcbc
`

export const Input = styled.input`
    display: none;
    &:checked + label {
        color: #fff;
        background: #blah;
    }
`

export const Label = styled.label`
    flex: 1;
    color: #blah;
    padding: 15px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;

   &:checked {


    }

    &:not(:last-child){
     ....
    }
`

и используйте его в качестве:

<SegmentedControlWrapper>
  <Input />
  <Label />
</SegmentedControlWrapper>

Большая часть этого корректна, и я думаю, что проверенное состояние не относится к типу propelry Любой указатель будет оценен. Как я запутался с использованием &,> и т. Д.

Answer 1

Пройдено проверено или не проверено в качестве реквизита для стиля. Это поможет в хорошем стиле.

export const Input = styled.input

display: none;
&:checked + label {
    color: #fff;
    background: {$props => {this.props.checked ? "some" : "some"}}
}
<Input checked={this.state.checked}/>