Изменить цвет ионного компонента в реакции - PullRequest
Новая
       10

Изменить цвет ионного компонента в реакции

1 голос
/ 06 июня 2019

IonButton --- Цвет

В настоящее время я работаю над приложением, которое необходимо создать для моей стажировки.Для этого я работаю в React и просто импортирую ионный компонент, чтобы упростить задачу.

Моя проблема связана с частью JSX, когда я создаю какой-то ионный компонент.Я создаю компонент Ionic Card, компонент IonButton и т.д ... и все работает!Но когда я хочу просто изменить цвет одной из кнопок, это не работает ...

Я попытался сделать это:.Но это не работает.Я также пытался создать переменную с именем style, которая является объектом со свойством (color: "success), но это тоже не работает. 



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;
...