IonButton --- Color

I'm currently working on an App which has to be create for my internship. For this, I'm working in React and I just import Ionic component to simplify the task.
My problem is from the JSX part when I build some Ionic component. I create Ionic Card component, IonButton component, etc... and all work! But when I want to just modify the color of one of the button, it doesn't work...
I've tried to do this: <ion-button style={{ color: "success"}}> . But it doesn't work. I've also tried to create a variable named style which is an object with the propriety (color: "success) But it doesn't work either.

import React from 'react';
import * as _ from 'lodash';
import './Delivery.css';
import { IonText, IonButton } from '@ionic/react';
import { IonCard } from '@ionic/react';
import { IonContent, IonFooter, IonToolbar, IonTitle, IonRow } from '@ionic/react';
import Map from './Map';
import Phone from './Phone';

const Delivery = ({delivery})  => {

    const Command_ID = delivery.order_id;
    const Delivery_Slot = delivery.endtime.substr(0, 2);
    //{delivery.endtime.substr(0, 2)-1}h-{delivery.endtime.substr(0, 2)}h

    const post_metas = delivery.post_meta;

    const firstname = post_metas[_.findIndex(post_metas, post_meta => {return post_meta.meta_key === '_shipping_first_name'})].meta_value;
    const lastName = post_metas[_.findIndex(post_metas, post_meta => {return post_meta.meta_key === '_shipping_last_name'})].meta_value;

    const PostalCode = post_metas[_.findIndex(post_metas, post_meta => {return post_meta.meta_key === '_shipping_postcode'})].meta_value;
    const adressPerso = post_metas[_.findIndex(post_metas, post_meta => {return post_meta.meta_key === '_shipping_address_1'})].meta_value;
    const city = post_metas[_.findIndex(post_metas, post_meta => {return post_meta.meta_key === '_shipping_city'})].meta_value;

    const Tel = post_metas[_.findIndex(post_metas, post_meta => {return post_meta.meta_key === '_billing_phone'})].meta_value;

        return (
            <IonCard>
        <div>
            <span style={{ color: 'grey' }}>#{Command_ID} - </span><span style={{ color: 'purple'}}>{Delivery_Slot - 1}h-{Delivery_Slot}h</span>
            <div>
                   <strong>{firstname} {lastName}</strong>
                    <p></p>
                    <div>
                        {adressPerso},{PostalCode},{city}
                        
                                               

                        <IonFooter >
                            <div>
                            <IonToolbar transparent >
                                <IonRow>
                                    <IonButton expand="block">
                                        <Phone phone={Tel} />
                                    </IonButton>
                                    <IonButton expand="block">
                                        <Map MapData={adressPerso} />
                                    </IonButton>
                                    <IonButton color="success">
                                        Terminé
                                    </IonButton>
                                </IonRow>
                            </IonToolbar>
                            </div>
                        </IonFooter>
                        
                        
                    </div>
            </div>
        </div>
        </IonCard>
        
    );
/*
return (
    <div>App2</div>

);
*/
};

export default Delivery;