Paypal React JS 按钮背景颜色答案

【问题标题】：Paypal React JS Buttons background colorPaypal React JS 按钮背景颜色
【发布时间】：2022-07-08 07:44:19
【问题描述】：

我在代码中使用Paypal react JS进行付款，如下所示（Next.JS）

import { useEffect } from "react";
import {
    PayPalScriptProvider,
    PayPalButtons,
    usePayPalScriptReducer
} from "@paypal/react-paypal-js";
import {
    Badge,
    Button,
    Center,
    Flex,
    Heading,
    Image,
    Link,
    Stack,
    Text,
    useColorModeValue,
} from '@chakra-ui/react';

const ButtonWrapper = ({ type }: any) => {
    const [{ options }, dispatch] = usePayPalScriptReducer();

    useEffect(() => {
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                intent: "subscription",
            },
        });
    }, [dispatch]);

    return (<PayPalButtons
        createSubscription={(_data, actions) => {
            return actions.subscription
                .create({
                    plan_id: "P-3RX065706M3469222L5IFM4I",
                })
                .then((orderId) => {
                    return orderId;
                });
        }}
        style={{
            label: "subscribe",
            color: "silver"
        }}
    />);
}

export default function CheckoutPage() {
    return (
        <Center py={6}>
            <Stack
                borderWidth="1px"
                borderRadius="lg"
                w={{ sm: '100%', md: '540px' }}
                height={{ sm: '476px', md: '20rem' }}
                direction={{ base: 'column', md: 'row' }}
                color={"white"}
                // bg={useColorModeValue('white', 'gray.900')}
                boxShadow={'2xl'}
                padding={4}>
                <Stack
                    flex={1}
                    flexDirection="column"
                    justifyContent="center"
                    alignItems="center"
                    p={1}
                    pt={2}>
                    <Heading fontSize={'2xl'} fontFamily={'body'}>
                        Checkout
                    </Heading>
                    <PayPalScriptProvider options={{
                        "client-id": "test",
                        components: "buttons",
                        intent: "subscription",
                        vault: true,
                    }}>
                        <ButtonWrapper type="subscription"></ButtonWrapper>
                    </PayPalScriptProvider>
                </Stack>
            </Stack>
        </Center>
    );
}

但是由于网站上的暗模式，按钮看起来很奇怪，我尝试用类名更改颜色，但它并没有变成黑色。我怀疑我们是否可以做任何事情来改变颜色，但如果我打算在浏览器渲染中使用脚本，这似乎不是问题，如图所示here

请帮我看看如何将背景颜色更改为黑色

【问题讨论】：

标签： css paypal next.js

【解决方案1】：

请帮助我如何将背景颜色更改为黑色

您不能，当前版本的 PayPal 按钮是 iframed 并且不允许更改背景颜色以呈现黑色按钮文本标签内容的正确前景色。

因此，如果您包含黑色借记卡或信用卡按钮及其可展开的表单，则必须使用浅色背景。

这是在深色背景网站中包含带有填充的浅色背景的合理方法；我将使用纯 HTML，如果你想使用它，你可以调整简单的 CSS 来做出反应

<script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>

<div id="paypal-button-container" style="background-color:white; padding:5px; border-radius:5px;"></div>

<script>
  paypal.Buttons({}).render('#paypal-button-container');
</script>

在黑色上，这看起来像：

【讨论】：