search

everydotorg / donate-button

A free donate and p2p fundraising button so nonprofit websites can accept cryptocurrency, stocks, and cash - credit, debit, bank, PayPal, Venmo, Apple Pay, Google Pay.
https://www.every.org
MIT License
49 stars 7 forks source link

fix: apply defaults styles to have higher specifity #273

Closed julianpoma closed 2 years ago

julianpoma commented 2 years ago

closes #269

The problem was that when the host of the button doesn't provide a value for a prop and uses the default, we had a specificity = 1 because we were applying the stlyes with a class.

In https://www.diamondapproach.org/donate page, the CMS is applying a class to .class <element> which has a specificity = 2 and overrides our styles.

Now we are assuring that those styles are applied inline on the element (specifity = 1000) so the styles shouldn't be overridden.

It's very improbable that this issue occurs again, but a more reliable solution could be use the Shadow DOM to create the button and isolate the styles

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/everydotorg/donate-button/84mrX9ABQjubhf4sp2UfE73iDCwD
✅ Preview: https://donate-button-git-button-higher-specificity-everydotorg.vercel.app