bug: property style doesn't work on root IonPage

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/

[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!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.