bug: property style doesn't work on root IonPage

[natqe]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Property style doesn't passing through an IonPage component

Expected Behavior

Property style should be passing to the actual IonPage element get rendered on the DOM

Steps to Reproduce

minimal ionic-react code

import { IonApp, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, setupIonicReact } from '@ionic/react'
import '@ionic/react/css/core.css'
import { createRoot } from 'react-dom'

setupIonicReact()

createRoot(document.getElementById('root')).render(<IonApp>
  <IonPage style={{ backgroundColor: 'black !important' }}>
    <IonHeader>
      <IonToolbar>
        <IonTitle>My Title</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      Hello World
    </IonContent>
  </IonPage>
</IonApp>)

Code Reproduction URL

https://github.com/natqe/ionic-page-style-not-working/

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[sean-perkins]

@natqe from a fresh starter app, I can see the style is being passed to the generated .ion-page element:

With the following code:

<IonPage style={{
  backgroundColor: 'black'
}}>

Are you actually trying to change the background color of the page or was that an example of a style?

If you are needing to modify the background color, you should use the respective CSS variables for ion-header and ion-content.

[natqe]

@sean-perkins idk what Versions r u run but i created a repo for showing that.
https://github.com/natqe/ionic-page-style-not-working/

Steps to run:

• clone the repo.
• install via npm i -f
• run npm start

[sean-perkins]

@natqe thanks for the reproduction!

This appears to be an issue with the root IonPage instance. If you have a nested IonPage, the inner instance appropriately applies inline styles.

This looks to be a flaw with the IonPage react implementation.

To work around this issue, you can specify className and it will apply correctly:

<IonApp>
  <IonPage className="my-custom-class">
    ..
  </IonPage>
</IonApp>

.my-custom-class {
  background-color: black;
}

I'll track this issue as a bug with react & we will prioritize in upcoming sprints or downtime. Thanks!

[sean-perkins]

Hello @natqe,

After revisiting this issue, I believe the root problem is the use of !important. If you remove that portion, the inline styles are applied correctly to the React component.

To change the background color of the page however, it would be better to use the following approach:

<IonPage style={{
 '--ion-background-color': 'black'
}}>
 {/* Existing content */}
</IonPage>

I am going to close this issue. Please let me know if you have questions or run into any issues with my recommended approach.