Page 1 of 1
@ray-js/components-ty-actionsheet 组件样式无法正常生效
Posted: 2024年 Jul 31日 17:39
by 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
Re: @ray-js/components-ty-actionsheet 组件样式无法正常生效
Posted: 2024年 Aug 1日 11:52
by 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;
}
Re: @ray-js/components-ty-actionsheet 组件样式无法正常生效
Posted: 2024年 Aug 1日 12:01
by muhai
footer和content之间有一个灰色的分割线，这个分割线是用border-top实现的，border宽度是8。你可以使用border-bottom-left、border-bottom-right。
我这边测试了footer的margin设置应该是生效的，但是footer的margin-bottom是一个js动态设置的底部安全边距，暂时无法通过css样式修改，不过可以用过footerStyle属性设置margin覆盖.
Re: @ray-js/components-ty-actionsheet 组件样式无法正常生效
Posted: 2024年 Aug 1日 15:34
by silverlight
muhai 2024年 Aug 1日 12:01
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>
),
});
Re: @ray-js/components-ty-actionsheet 组件样式无法正常生效
Posted: 2024年 Aug 5日 16:50
by silverlight
muhai 2024年 Aug 1日 12:01
footer和content之间有一个灰色的分割线，这个分割线是用border-top实现的，border宽度是8。你可以使用border-bottom-left、border-bottom-right。
我这边测试了footer的margin设置应该是生效的，但是footer的margin-bottom是一个js动态设置的底部安全边距，暂时无法通过css样式修改，不过可以用过footerStyle属性设置margin覆盖.
你好，底部按钮有类似footerStyle这样的属性进行设置吗？
Re: @ray-js/components-ty-actionsheet 组件样式无法正常生效
Posted: 2024年 Nov 15日 11:57
by muhai
有的，底部按钮是okButtonProps.style和cancelButtonProps.style可以设置