[英]Ionic 4 - How to change font-size of button inside a Toast
I'm building an app with Ionic 4 + React.我正在用Ionic 4 + React 构建一个应用程序。
Using a toast component when the user delete an element to show the message "deleted successfully", but adding a button inside to give the possibility to undo the action.当用户删除元素时使用toast 组件以显示“已成功删除”消息,但在内部添加一个按钮以提供撤消操作的可能性。
I need to change the font-size of that button, but almost all the toast DOM is inside a shadow-root
:我需要更改该按钮的字体大小,但几乎所有 toast DOM 都在
shadow-root
内:
Reading articles like this , I understand that everything inside shadow-root
it can't be styled by css selectors and must be styled using CSS4 Ionic variables.阅读这样的文章,我知道
shadow-root
中的所有内容都不能通过 css 选择器设置样式,必须使用 CSS4 Ionic 变量设置样式。
But I can't find a css variable to change de font-size of the button, this is what Ionic does (not with variables):但我找不到 css 变量来更改按钮的字体大小,这就是 Ionic 所做的(不是变量):
Read some people that said that could work with a custom class, I already tried that but without any luck:阅读一些人说可以使用自定义 class,我已经尝试过,但没有任何运气:
Toast component:吐司成分:
<IonToast
cssClass="e7-toast"
isOpen={showToastDeshacer}
color="dark"
onDidDismiss={() => setShowToastDeshacer(false)}
message="Deleted successfully"
position="bottom"
buttons={[
{
text: 'Undo',
role: 'cancel',
handler: () => {
console.log('Undo clicked');
}
}
]}
/>
CSS: CSS:
.e7-toast .toast-button-inner {
font-size: 44px!important;
}
Anyone with more experience in Ionic 4 knows a way to change the font-size of that button?任何对 Ionic 4 有更多经验的人都知道更改该按钮字体大小的方法吗?
Thanks!谢谢!
you can change the shadow dom by using ::part
.您可以使用
::part
更改影子 dom。 There is the article for your reference: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/有文章供您参考: https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.