Ionic 4 + React, not able to customize look and feel

I’m trying to change the background of my IonContent, but all the information I found doesn’t work. I’m using Ionic 4 and React. I tried to add a custom CSS in the globals.scss and it doesn’t affect my IonContent design. Also, I do not have a “src/app” folder, I only have a “src” folder. So it seems like a lot of resources out there is for Ionic + Angular, and those solution doesn’t work for Ionic + React. Does anyone have some pointer? Thanks!

example project that I have where I changed the card background-color, see file WeatherCard.js

      <ion-label  
         style={{
             backgroundColor : 'green', 
             fontSize: 22, 
             fontWeight: 900
      }}>
      {title}
      </ion-label>

Thanks for the response. Unfortunately, your example doesn’t work. It’s one of the frustration. You are using Angular, (i.e. ion-label), and I’m using React (i.e. IonLabel). None of the answer I found in the internet works for React and only work for Angular.

I manage to change the color doing the inline way:

My goal is to be able to use a .png file as background image.

I also need the solution to be global styling and not inline styling.

You are using Angular, (i.e. ion-label), and I’m using React (i.e. IonLabel).

the code is react… Not sure what you are looking at… your question is not clear and it seems you have multiple areas that you are confused about…

I also believe that

“I also need the solution to be global styling and not inline styling.”

is a react question and has nothing to do with Ionic

I’m looking at the Ionic documentation: https://ionicframework.com/docs/api/content

Looking at the Usage section, the Angular tab is using “” as the tag, while the React section is using “” as the tag. The <ion-???> is the syntax/tag for Angular, while the <Ion???> syntax/tag is for React, am I’m not understand it correctly?

Ionic has variables.scss and globals.scss, which starting from Ionic 4, it’s using “Shadow DOM”, which has something to do with CSS 4… I’m going down a rabbit hole that I’m questioning what I’m doing all the time.

all I am saying is that I am concerned that you are saying running code is angular when in fact it is not… so I am questioning if you even took the time to look at the fully functioning project I sent you a link to.

I looked at your response but didn’t follow it to the stackblitz site. But turn out you and I are doing it differently. You are using Create-React-App while I’m using the latest Ionic CLI (https://ionicframework.com/docs/installation/cli).

I’m attempt to develop for mobile so I need to take advantage of the DevApp, and the Ionic CLI has the Serve feature which make testing easier.

I don’t know how to explain it, but strictly follow Ionic’s documentation (using their Ionic CLI to create a React+Ionic project), any <ion-???> tag will not compile.

Also, to create a React version of project using the Ionic CLI, you need to specify --type like this blog:
https://ionicframework.com/blog/ionic-cli-v5-brings-react-beta-support/

Annoyingly, it is not explain in their documentation site.

Really appreciate trying to help, but as you can see, their documentation site do not provide straight forward reference.

1 Like

It’s March 2020 and I am having a similar experience with Ionic + React + Capacitor.
Documentation is hard to find. Obfuscated by seemingly irrelevant results regarding Angular - maybe ???
On the original topic of styling, did you find a resolution @MosesOng ?