Question

我实现了使用 ACI 网关的支付。我发现 bootstrap 覆盖了 ACI 的苹果支付按钮附带的 css。

这是我的代码的样子：

import * as React from "react"
import {useEffect} from "react";
import {FaRegCreditCard} from'react-icons/fa';
import "../../styles/shoppingBag.css";


export function RenderPaymentScript({checkoutId,orderId}) {
    const id = localStorage.getItem("restaurantUid");
    const isSafari = window.safari !== undefined;

    useEffect(async ()=>{
        window.wpwlOptions={
            applePay: {
                displayName: "example",
                total: { label: "example" },
                style: "black",
                currencyCode: "EUR"
            },
            style: "plain",
            locale:"DE",
            
        };
        const script = document.createElement("script");
        script.src =`${process.env.REACT_APP_PAYMENT_URL}${checkoutId}`;
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    },[]);

    return (
        <div className="reset">
            <form action={`${process.env.REACT_APP_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="APPLEPAY"/>
            <form action={`${process.env.REACT_APP_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="GOOGLEPAY"/>
                <div className="paymentBox">
                    <text>Kreditkarte</text>
                    <FaRegCreditCard size={25} color={'#6C5AF2'} className="paymentIcon"/>
                </div>
            <form action={`${process.env.REACT_APP_URL}/checkout/${id}/${orderId}/`} className="paymentWidgets" data-brands="VISA MASTER"/>
        </div>
    )
}


export default RenderPaymentScript;

这就是导致代码被覆盖的原因：

这就是按钮现在的样子：

我不知道如何再次覆盖引导程序或阻止引导程序在此函数中执行。

这是我尝试重置它的方式：

.reset {
    -webkit-appearance: none;
    -moz-appearance:none;
    appearance:none;
}

Answer 1

尝试更具体的选择器，包括更多定位器，例如：

button[type="button"].reset {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

或者使用 !important，如果它没有帮助：

button[type="button"].reset {
    -webkit-appearance: none !important;
    -moz-appearance: none important;
    appearance: none important;
}

Bootstrap 覆盖 css 样式

1 个答案: