css - How to style Ionic component using shadow part - Stack Overflow

admin管理员组

文章数量:1122846

I created a button with a popover like this:

Here is the Vue template code:

<template>
  <div :class="['lang-button', { 'in-list': listItem } ]">
    <k-button id="lang-button" :raised="!listItem" clear class="py-3 px-3">
      <font-awesome-icon icon="earth-americas" class="mr-2" />
      {{ $t('common.language') }}
    </k-button>
    <ion-popover trigger="lang-button" :dismiss-on-select="true">
      <ion-content class="lang-button-popover-content">
        <ion-list>
          <ion-item :button="true" :detail="false" @click="setLanguage('en')">English</ion-item>
          <ion-item :button="true" :detail="false" @click="setLanguage('es')">Español</ion-item>
        </ion-list>
      </ion-content>
    </ion-popover>
  </div>
</template>

Unfortunately, the last item (Espanol) has a bottom border I want to remove. In Chrome Inspector, I can do it:

It looks better afterwards:

But I'm not able to figure out how to style it in code to do that. I tried:

ion-item::part(native) {
  .item-inner {
    border-bottom-width: 0;
  }
}

and a bunch of other variations, and nothing works. How do you remove style that div.item-inner to remove that bottom margin?

Thanks.

I created a button with a popover like this:

Here is the Vue template code:

<template>
  <div :class="['lang-button', { 'in-list': listItem } ]">
    <k-button id="lang-button" :raised="!listItem" clear class="py-3 px-3">
      <font-awesome-icon icon="earth-americas" class="mr-2" />
      {{ $t('common.language') }}
    </k-button>
    <ion-popover trigger="lang-button" :dismiss-on-select="true">
      <ion-content class="lang-button-popover-content">
        <ion-list>
          <ion-item :button="true" :detail="false" @click="setLanguage('en')">English</ion-item>
          <ion-item :button="true" :detail="false" @click="setLanguage('es')">Español</ion-item>
        </ion-list>
      </ion-content>
    </ion-popover>
  </div>
</template>

Unfortunately, the last item (Espanol) has a bottom border I want to remove. In Chrome Inspector, I can do it:

It looks better afterwards:

But I'm not able to figure out how to style it in code to do that. I tried:

ion-item::part(native) {
  .item-inner {
    border-bottom-width: 0;
  }
}

and a bunch of other variations, and nothing works. How do you remove style that div.item-inner to remove that bottom margin?

Thanks.

• css
• ionic-framework
• web-component
• shadow-dom
• ionic-vue

Share Improve this question Follow asked yesterday jacobjacob 2,89611 gold badge2222 silver badges6161 bronze badges 5

• 1 A part can only target the Node it is set on. – Danny '365CSI' Engelman Commented yesterday
• 1 So your only way "in" is to use JS to cross those 3 (open) shadowRoots and grab that Node you want to remove the style from. – Danny '365CSI' Engelman Commented yesterday
• Ok, thanks @Danny'365CSI'Engelman. I ended up using Konsta UI for the list inside the ion-popover, since Konsta doesn't use Shadow DOM. Will try to just use Ionic for page wrapper and overall app control, and stay away from it for things that need to be styled. – jacob Commented yesterday
• @jacob -- Its bad practice to add another UI framework on top of a UI framework but to each their own. – StackOverHoes Commented yesterday
• Konsta is designed to work with Ionic: konstaui.com/vue/ionic What is "bad practice" about it? What will happen? I want to use Ionic's app architecture, i.e. pages and routing, but mainly their button styles I don't like. And it's very hard to style. I have an existing Framework7 app, but its router has bugs and it's not really updated anymore. Ionic will hopefully resolve those issues, and then Konsta helps keep much of the UI consistent, because it's made by the same guy as Framework7. – jacob Commented yesterday

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

To fix this issue is as simple as looking at the docs and it shows you how to do this without extra css.

<ion-item lines="none">
 <ion-label>Item Lines None</ion-label>
</ion-item>

本文标签： cssHow to style Ionic component using shadow partStack Overflow