- Styles are protected from any potential style conflicts. This means you don’t have to worry about theme or plugin styles conflicting with the SureCart UI.
- If the internal HTML structure of any components changes, you won’t need to update any custom CSS.
CSS Variables
CSS variables are ideal for making global style changes that are shared across components. For instance, you can use a CSS variable like--sc-border-radius to easily change the border radius for various elements like form elements, inputs, cards, and buttons, ensuring a consistent design across your site.
Example:
Colors
Border Radius
Shadow
Spacing
Transition
Fonts / Typography
Focus Ring
Inputs
CSS Parts
CSS Parts offer a low-level way to customize individual components within SureCart. Unlike CSS Variables, which provide high-level customizations for multiple components, CSS Parts allow you to target specific parts of a component’s internal structure for fine-grained customization. This can be achieved using pure CSS, without the need for additional tools or methods. SureCart components use a shadow DOM to encapsulate their styles, which means that their internal structure isn’t directly accessible using standard CSS selectors. Instead, components expose “parts” that can be targeted using the CSS part selector,::part(). This allows you to style specific elements within a component without affecting its overall structure.
For example, if you want to customize the appearance of a specific button within a SureCart component, you can use CSS Parts to target that button and apply custom styles to it, all while leaving the rest of the component’s styling intact. This provides a powerful way to tailor the look and feel of individual components to match your design preferences.
Finding CSS Parts
To discover the specific CSS parts available for styling within SureCart components, you can refer to our Components Documentation. In this documentation, you will find a dedicated section for each component labeled “Shadow Parts.” This section provides a comprehensive list of the available shadow parts that you can target for customization.Some Examples
Here are some examples that modify various components to achieve a more techy or brutalist style.Input/Text Field
To restyle the input field, we will refer to the input component codex. This will provide us with information about the various CSS parts that can be used for styling.css
ja