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

Ionic Framework
1

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!

2

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>
3

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.

4

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

5

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.

6

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.

7

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.

8

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
9

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 ?

10

For anybody having problems with this. Your supposed to style it with the html element name instead of the react component name, for example to style <IonText>Hello, World!</IonText> you will use ion-text { font-size: 2rem; } in css.

1 Like
11

I started with ionic yesterday and I got the same problem. I solved it by adding !important in the property. Example: background-color: “your color here” !important. If you see the css’ provided by ionic all of them properties have !important, that’s why it doesn’t work the customized ones.

12

You need to look at the documentation for the components regarding the styling… I think there is a
—background-color property that you can use