Question

IonButton ---颜色

我目前正在开发一个必须为我的实习而创建的应用程序。为此，我正在React中工作，我只是导入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>

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

1 个答案: