在 React 中更改离子组件的颜色

Question

IonButton --- 颜色

我目前正在开发一个必须为我的实习创建的应用程序。为此，我在 React 中工作，我只是导入 Ionic 组件来简化任务。

当我构建一些 Ionic 组件时，我的问题来自 JSX 部分。我创建了 Ionic Card 组件、IonButton 组件等......并且一切正常！但是当我只想修改其中一个按钮的颜色时，它不起作用......

我试过这样做：。 但它不起作用。我也尝试创建一个名为 style 的变量，它是一个具有适当性的对象（颜色：“成功）但它也不起作用。

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;

Answer 1

怎么样：

<IonButton color={'danger'}>danger</IonButton>
<IonButton color={'primary'}>primary</IonButton>
<IonButton color={'secondary'}>secondary</IonButton>
<IonButton color={'tertiary'}>tertiary</IonButton>
<IonButton color={'success'}>success</IonButton>
<IonButton color={'warning'}>warning</IonButton>
<IonButton color={'light'}>light</IonButton>
<IonButton color={'medium'}>medium</IonButton>
<IonButton color={'dark'}>dark</IonButton>