CheckboxGroup样式存在异常,如何才能修改CheckboxGroup的样式

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
silverlight
Posts: 179

  • Tuya MiniApp IDE 版本信息:0.8.8

    • @ray-js/ray, @ray-js/panel-sdk的版本(如使用ray开发)在package.json查看~
      "@ray-js/panel-sdk": "1.10.0",
      "@ray-js/ray": "1.7.10",

    • 相关代码:

      Code: Select all

              <View style={{height:'100%',width:'100%'}}>
                <CheckboxGroup onChange={changeCheckbox} >
                {options.map((item, index) => (
                  <View className={styles.popsub} >
                     <Label key={index + '_' + item.value}>
                      <Checkbox
                        value={item.value}
                        checked={item.checked}
                        disabled={item.disabled}
                        color={item.color}
                      />
                      {item.label}
                    </Label>
                  </View>
                ))}
                </CheckboxGroup>
              </View>
              

      其中的样式为

      Code: Select all

        .popsub {
          height: 150rpx;
          width: 100%;
          border-radius: 16rpx;
          margin: 16rpx ;
          padding: 16rpx;
      
          border: 1px solid #e5e5e7;
          color: #000;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;}
    • 问题描述(复现步骤):CheckboxGroup没有居中

    • 预期结果:我希望CheckboxGroup内部可以居中,且CheckboxGroup内部样式可以争取修改

    • 实际结果:
      CheckboxGroup没有居中

      企业微信截图_17497164399780.png

======
当外层view定义为flex布局的时候,CheckboxGroup的样式发生变化,存在异常
[

Code: Select all

        <View style={{height:'100%',width:'100%',display:'flex'}}>
          <CheckboxGroup onChange={changeCheckbox} >
          {options.map((item, index) => (
            <View className={styles.popsub} >
               <Label key={index + '_' + item.value}>
                <Checkbox
                  value={item.value}
                  checked={item.checked}
                  disabled={item.disabled}
                  color={item.color}
                />
                {item.label}
              </Label>
            </View>
          ))}
          </CheckboxGroup>
        </View>
企业微信截图_17497164399780.png
Attachments
企业微信截图_17497166746748.png
Last edited by silverlight on 2025年 Jun 12日 17:14, edited 1 time in total.

Tags:
tdeveloper
Site Admin
Posts: 38

Re: CheckboxGroup样式存在异常,如何才能修改CheckboxGroup的样式

已在群里咨询

:arrow: 你对灵魂的渴望,是你命运的先知
silverlight
Posts: 179

Re: CheckboxGroup样式存在异常,如何才能修改CheckboxGroup的样式

tdeveloper 2025年 Jun 12日 16:45

已在群里咨询

群里解决了部分问题,但还有部分没能得到答复

Post Reply