Styling 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 if styled is set to true)
• .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, and loaded globally after your own stylesheets.

Using a layer gives them a lower priority than regular unlayered CSS, regardless of selector specificity, allowing for easy overwriting with your own customizations. If your project doesn't use CSS layers, nothing else is required.

Using your own CSS layers

If your project declares its own layers, include components in your layer order statement, at the position where the module's default styles should sit:

@layer reset, base, components, utilities;

Layers are ordered by the first time each name is declared. The module never declares a layer order itself, so your statement always decides it; if components is missing from it, the layer is created later and ends up on top of all your other layers.