Shop Pay Button not customizable with className provided
ssagli opened this issue · comments
Describe the bug
There is ShopPayButton with className prop attached to it; however, I am not able to customize the style of ShopPayButton with it. When I checked browser console, it is adding !important to the background, border-radius, width and height. I have tried to specify with the css selector like #shop-pay-button-link and I#a.shop-pay-button-link. It is not clear from the documentation if this is intentional or not. Please assist. Thank you in advance ✨
To Reproduce
use the component like so:
<ShopPayButton
width='50%'
variantIds={[selectedVariant?.id!]}
storeDomain={storeDomain}
className='bg-white rounded-full' // doesn't affect the anchor tag
/>
above code renders this below:
Expected behaviour
I expect className prop would at least let me customize border radius of it, and hopefully background color as well. 🙏🏼
Screenshots
Here is the screenshot of !important.
-
Using node >=16.13
-
react ^18.2.0
-
@shopify/cli-hydrogen ^4.1.1
-
@shopify/hydrogen" ^2023.1.6
-
@shopify/remix-oxygen ^1.0.4
-
tailwindcss 3.1.8
-
postcss ^8.4.16
-
postcss-cli ^10.0.0
-
postcss-import ^15.0.0
-
postcss-preset-env ^7.8.2
