Usage
Styling with CSS
How to apply custom styles to the <SocialShare> component with CSS.
Component default styles
The base for visual customization of the <SocialShare> buttons are the builtin CSS classes:
.social-share-button.social-share-button--{network name}.social-share-button--styled(only ifstyledis set totrue).social-share-button__icon.social-share-button__label
and the CSS brand color variable, applied to the <a> element, and available to all its children:
--color-brand
CSS Specificity
The component CSS styles are placed inside a @layer components CSS layer.
Using a layer ensures a lower specicifity over regualar unlayered CSS, allowing for easy overwriting with your own customizations.
You can refer to MDN documentation on CSS
@layer rule for more info about this feature