javascript - 如何在 react-responsive-carousel 中删除默认的黑色边框

Question

我在 Ionic react 工作。我添加了react-responsive-carousel用于滑动内容，但默认情况下有黑色边框，如图所示。我已经从节点模块中的 CSS 文件中更改了 CSS 值，但更改不会反映在内容中。我该如何解决问题

    <Carousel>
      {
        assignedOrderData&&assignedOrderData.map((item1: any) => item1.map((item: any) =>


          <IonGrid id='dashboard-orders'>
            <IonList onClick={() => history.push(`/myorderdetails/${item.order_id}`)} >
              <IonRow >
                <IonCol style={{ height: '.5px', borderTop: '.5px' }} size='1' class="ion-text-end">
                  <IonIcon icon={timeOutline} color='primary' />
                </IonCol>
                <IonCol size='5'>
                  <IonText class="ion-text-nowrap" color='primary'> Delivery Time: 5 PM </IonText>
                </IonCol>

                <IonCol size='6' class="ion-text-end" >
                  <IonBadge onClick={() => { }}>View Delivery </IonBadge>
                </IonCol>
              </IonRow>

              <IonRow>
                <IonCol size='8' class="ion-text-start">
                  <IonText color='dark' style={{ fontSize: '.8em' }}>   {[item.shipping_address_1, item.shipping_city, item.shipping_postcode].filter(Boolean).join(',  ')} </IonText>
                </IonCol>
                <IonCol class="ion-text-end">
                  <IonText style={{ fontSize: '.8em' }} color='dark' class="ion-text-start"  >Order : # {item?.order_id} </IonText>
                </IonCol>
              </IonRow>

              <IonItem lines='full' color='medium' style={{ height: '.5px', borderTop: '.5px' }}></IonItem>

              <IonRow style={{ paddingTop: '5px' }}>
                <IonCol> <IonText color='dark' class="ion-text-nowrap">5.33 m </IonText></IonCol>
                <IonCol> <IonText color='dark' class="ion-text-nowrap">{item.delivery_time} </IonText></IonCol>
                <IonCol > <IonText color='dark' class="ion-text-nowrap">{item.total_text} </IonText></IonCol>
                <IonCol> <IonText color='dark' class="ion-text-nowrap">{item.payment_method} </IonText></IonCol>
              </IonRow>

              <IonRow style={{ paddingTop: '3px' }}>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">Dist </IonText></IonCol>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">ETA </IonText></IonCol>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">Amount</IonText></IonCol>
                <IonCol> <IonText style={{ fontSize: '.8em' }} class="ion-text-nowrap">Payment</IonText></IonCol>
              </IonRow>
            </IonList>
          </IonGrid>

        ))}
    </Carousel>}

标签： javascriptcssreactjsionic-frameworkcarousel

Answer 1

您需要在页面 css 文件中为此添加一些 css。

.carousel .slide{
    background: #ff442e!important;
}