reactjs - 在 React 中更改离子组件的颜色
问题描述
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;
解决方案
怎么样:
<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>
推荐阅读
- javascript - 如何修改对象数组并返回最新更新的字段?
- mysql - 我们是否必须在子查询中使用表变量的别名
- c++ - 分配 unique_ptr<> 时运算符“=”出现问题
- php - Mongodb中重复键错误消息中的unhex字段如何
- google-cloud-platform - 从 Client ID + Secret 获取 Google Project ID?
- selenium - locusts-plugins: FileNotFoundError: [WinError 2] 系统找不到指定的文件
- sql-server - SQL Server:如何合并具有不同行数的 3 个表
- typescript - webpack-dev-server包和http-proxy-middleware冲突,也是它的子依赖
- amazon-web-services - 如果使用 EC2 角色,Go AWS SDK 是否需要凭证?
- vue.js - 如何通过设置 v-model 来更新现有的 v-select?