taro3.x: checkbox使用问题

准备数据：

interface ISandState {
    value: string
    text: string
    checked: boolean
}

const INIT_SAND_STATE: ISandState[] = [
    {
        value: '1',
        text: '在售',
        checked: true
    },
    {
        value: '2',
        text: '待售',
        checked: true
    },
    {
        value: '3',
        text: '售完',
        checked: true
    }
]

　　

tsx:

<View className="sand-state">
                        <CheckboxGroup className="sand-state-box">
                            {
                                sandState.map((item: any, index: any) => (
                                    <Label className="check-label" for={index} key={index}>
                                        <Checkbox
                                            className="check-box"
                                            value={item.value}
                                            checked={item.checked}
                                        >
                                        </Checkbox>
                                        <Text className="check-text">{item.text}</Text>
                                    </Label>
                                ))
                            }
                        </CheckboxGroup>
                        <View className="sand-state-btn">收起</View>
                    </View>

样式

.sand-state {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 30px;
            bottom: 30px;

            &-box {
                flex: auto;
                height: 60px;
                line-height: 60px;
                font-size: $font-basic;
                padding: 0 40px 0 20px;
                margin-right: -30px;
                border-radius: 30px;
                background-color: rgba($color: $white, $alpha: .9);
                transition: .3s;

                &.hide {//添加隐藏样式时 transition动画执行
                    width: 0;
                    padding: 0;
                    overflow: hidden;
                }

                .check-label {
                    margin: 0 10px;
                    .check-box {
                        vertical-align: 2px;
                        .wx-checkbox-input {
                            width: 30px;
                            height: 30px;
                        }
                    }
                    .check-text {
                        color: $text-color;
                    }
                }
            }

            &-btn {
                width: 90px;
                height: 90px;
                line-height: 90px;
                font-size: $font-basic;
                border-radius: 50%;
                text-align: center;
                background-color: $white;
                color: $title-color;
            }
        }

改checkbox的默认样式

 <Checkbox
    className="check-box"
    value={item.value}
     checked={item.checked}
>
</Checkbox>
check-box下微信内部样式：
.check-box .wx-checkbox-input {}
.check-box .wx-checkbox-input.wx-checkbox-input-checked{}选中样式
.check-box .wx-checkbox-input.wx-checkbox-input-checked::before{}

图例：