How can I completely remove some of the default styling from Ionic? (paragraph styling for IonItem IonLabel)

Ionic Framework Ionic React
1

I have a component that generates a lot of list items like this:

      <IonItem>
        <IonLabel>
          <p>This is a sentence that explains something to the user.</p>
        </IonLabel>
      </IonItem>

The problem is that using a <p> tag inside <IonLabel> adds some styling:

  • The text is made smaller.
  • The text is turned gray.

Both of these changes make the items much harder to read.

This behavior can be seen in the documentation under Item Labels-- it might make sense if you have a heading too, as shown in the example, but it does not make sense for my case when I am only using the <p> tag.

So, is there some way I can easily remove all styling Ionic is adding for the <p> tag here?

On iOS, I see the styling is from selectors like .sc-ion-label-ios-s p and .sc-ion-label-ios-s>p, so I’d like to somehow disable all modification of the <p> tag without individually overriding multiple selectors for iOS and Android.

I can’t easily remove the <p> tag from my code because the component values are provided via an API.

2

I think your only option is to override the styles as you said or just don’t use IonLabel. You don’t have to use all of Ionic’s components :grinning_face:

1 Like
3

Thanks! It turns out it was pretty easy to override the text adjustments.

// By default, Ionic makes text smaller and gray (readability fix).
ion-list ion-item ion-label p {
  color: var(--ion-text-color) !important;
  font-size: var(--app-text-size) !important;
}
2 Likes