@ray-js/components-ty-actionsheet 组件样式无法正常生效

[silverlight]

版本信息：Node: v18.17.0 Tools: 0.6.6 Ray: 1.5.20

Code: Select all

依赖版本- @ray-js/ray："^1.5.20",, @ray-js/panel-sdk ："^1.12.0",    "@ray-js/components-ty-actionsheet": "^0.0.26",


- 相关代码：

actionsheet中header，content，foot三个部分的样式修改如下

Code: Select all

  

  const { modal: modal1 } = ActionSheet.useActionSheet({
    footerClassName:styles.actionSheet1,
    headerClassName	:styles.actionSheet2,
    contentClassName:styles.actionSheet3,
  });

样式代码

Code: Select all

.actionSheet1 {
  margin: 0;
  border: 0;
  background-color: red;
  border-radius: 100rpx;
}
.actionSheet2 {
  margin: 0;
  border: 0;
  background-color: yellow;
  border-radius: 100rpx;
}
.actionSheet3 {
  margin: 0;
  border: 0;
  background-color:blue;
  border-radius: 100rpx;
}

• 问题描述
  1：其中header，content，footer无法修改背景颜色。
  2：footder的margin，border无法得到正确的修改
  当footer的margin，border设置为零的时候 ，实际margin是34，border为8.
  
  当footer的margin，border设置为二十的时候。margin得到了修改，但是border依然是8
  

[muhai]

footerClassName改成

Code: Select all

    cancelButtonProps: {
      className: styles.actionSheet3,
    },
    okButtonProps: {
      className: styles.actionSheet3,
    },

footer是一个容器，里面有一个cancel按钮和ok按钮，背景色是这两个按钮体现出来的

content的样式背景色无效，应该是你当前用的content组件自带了背景颜色覆盖掉了content容器的颜色

这是示例demo：

Code: Select all

    contentClassName: styles.actionSheet1,
    headerClassName: styles.actionSheet2,
    cancelButtonProps: {
      className: styles.actionSheet3,
    },
    okButtonProps: {
      className: styles.actionSheet3,
    },

Code: Select all

.actionSheet1 {
  margin: 0;
  border: 0;
  background-color: red;
  // border-radius: 100rpx;
}
.actionSheet2 {
  margin: 0;
  border: 0;
  background-color: yellow;
  border-radius: 100rpx;
}
.actionSheet3 {
  margin: 0;
  border: 0;
  background-color: blue;
  border-radius: 100rpx;
}

[muhai]

footer和content之间有一个灰色的分割线，这个分割线是用border-top实现的，border宽度是8。你可以使用border-bottom-left、border-bottom-right。
我这边测试了footer的margin设置应该是生效的，但是footer的margin-bottom是一个js动态设置的底部安全边距，暂时无法通过css样式修改，不过可以用过footerStyle属性设置margin覆盖.

[silverlight]

footer和content之间有一个灰色的分割线，这个分割线是用border-top实现的，border宽度是8。你可以使用border-bottom-left、border-bottom-right。
我这边测试了footer的margin设置应该是生效的，但是footer的margin-bottom是一个js动态设置的底部安全边距，暂时无法通过css样式修改，不过可以用过footerStyle属性设置margin覆盖.

谢谢，目前我通过对headerStyle，contentStytle,footerStyle的修改，成功对header，content的背景颜色修改以及footer的border、margin进行了修改。
但还有一些问题。
一： headerClassName: styles.actionSheet2，还是不能修改背景颜色，仅能通过headerStyle实现。
二：footer的两个按钮的颜色没能成功修改。
三：headerStyle是优先级最高吗？会覆盖掉headerClassName
完整代码如下

Code: Select all

  const { modal: modal1 } = ActionSheet.useActionSheet({
    initData:datas,
    position: "bottom",
    headerStyle:{backgroundColor:'red',borderRadius:'100px'},
    contentStyle:{backgroundColor:'yellow'},
    footerStyle:{margin:0,border:0,backgroundColor:'blue'},
    headerClassName: styles.actionSheet2,
    contentClassName: styles.actionSheet1,
    cancelButtonProps: {
      className: styles.actionSheet3,
    },
    okButtonProps: {
      className: styles.actionSheet3,
    },
    header: {
      content: name,
    },
    cancelText: "取消",
    okText: "确认",
    show: visible1,
    onClickOverlay: () => setVisible1(false),
    onOk: () => {
      if (selectedDpCode !== null && selectedValue !== null) {
        actions[selectedDpCode].set(selectedValue);
      }
      setVisible1(false);
    },
    onCancel: () => {
      setVisible1(false);
    },
    content: (
      <View style={{ padding: 16 ,backgroundColor:'red',borderRadius:'16px'}}>
         内容
      </View>
    ),
  });

[silverlight]

footer和content之间有一个灰色的分割线，这个分割线是用border-top实现的，border宽度是8。你可以使用border-bottom-left、border-bottom-right。
我这边测试了footer的margin设置应该是生效的，但是footer的margin-bottom是一个js动态设置的底部安全边距，暂时无法通过css样式修改，不过可以用过footerStyle属性设置margin覆盖.

你好，底部按钮有类似footerStyle这样的属性进行设置吗？

[muhai]

有的，底部按钮是okButtonProps.style和cancelButtonProps.style可以设置