The component disappear when i put className for CSS styling . @ionic/react

Ionic Framework
1

Hello ,
I have an issue which is that the component disappear when i put className .
For example < IonCard className="productCard ">
I need help with this , thank you .

2

Looks like the @ionic/react components all use just class. className appears only reserved for basic JSX elements

3

Oh , so how it can be solved then ?!
I have the same problem with CSS in JS too.

4

this is what seems to work for me
if you have intellisense in your IDE/editor, it helps a lot with exploring new libraries

ProductCard/ProductCard.js

import classes from './ProductCard.module.css';
import { IonCard } from '@ionic/react';

    ...

    <IonCard class={classes.ProductCard}>
        <!-- Card Content -->
    </IonCard>

ProductCard/ProductCard.module.css

.ProductCard {
    //styles
}
5

Thank you jjdev. :kissing_heart: .But unfortunately, i don’t use css modules .

6

if @jjdev is correct it’s maybe like in Stencil then?

    <IonCard class="productCard">

and if you class name is contained in a string

    const myClassName = 'produceCard';
    <IonCard class={myClassName}>

maybe?

7

I think the normal implementation should work

import './ProductCard.css';

    ...
    <IonCard class="ProductCard">