如何在 ionic v4 中的 item-native div 中编辑“item-inner”类？

Posted 2023-03-06

【中文标题】如何在 ionic v4 中的 item-native div 中编辑“item-inner”类？

【英文标题】：How to edit "item-inner" class in item-native div in ionic v4?

【发布时间】：2019-06-21 09:00:51

【问题描述】：

我必须删除在 .item-native 内的 .item-inner 类中添加的额外填充。 https://ibb.co/vs4BWWp

<div class="item-native">
<slot name="start">
</slot>
<div class="item-inner">
<div class="input-wrapper">
<slot></slot>
</div><slot name="end"></slot>
<div class="item-inner-highlight"></div></div>
</div>

【问题讨论】：

你能分享css吗？

@rchau 为？你能再描述一下吗？

分享item-inner的风格。另外，item-native 是动态的吗？

【参考方案1】：

ion-item
    --inner-padding-end: 0px;
    --padding-start:0px

这是可行的，因为引入了 ionic 4 Web 组件和影子 DOM 以保持“基本 CSS”的隔离。

在很多情况下，只需将 -- 放在想要更改的 CSS 属性前面，或者换句话说：只需定义一个与您要更改的属性同名的 CSS 变量即可。

有人知道对 ionic 的 shadow DOM 或类似内容的完整引用吗？

更多信息：Shadow DOM in Ionic (and Why it’s Awesome)、CSS Shadow Parts、CSS variables、Web Components

【讨论】：

虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

非常感谢我不会在发帖时接受

哇。我尝试了几个答案，但这一个效果很好。

有效。非常感谢。

【参考方案2】：

this 并使用类 item-inner 移除该元素的填充：

.item-inner
 padding:0 !important;

【讨论】：

试试 但这不是直觉

请在运行时创建包含项目内部的 div 后查看 ionic。所以不能使用html css。

【参考方案3】：

.item-native .item-innerpadding:0。这将删除该元素的填充