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>

大多数情况是正确的，我认为检查状态不是样式的推进器。任何指针将不胜感激。由于我对使用＆，>等感到困惑

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}/>

嵌套html元素的样式化组件（反应）

1 个答案: