Style API

Welcome to the Component Style API documentation for our Earth Design System. This document will help you understand how to customize the appearance of components by leveraging the various styling options provided by our system. Each component is designed with multiple stylable parts which allows you to target specific elements within the component for precise styling.

Our Style API consists of four style props that allows you to easily override or extend default styles:

Applies a single or multiple CSS classes to the "root" element of the component.

Type Definition:

className: string | undefined;

Example:

<Button className="w-full">Click here</Button>

This applies the w-full class to the root element of the Button component

Allows inline styles to be directly applied to the "root" element.

Type Definition:

style: CSSProperties;

Example:

<Button
	style={{
		width: '100%',
	}}
>
	Click here
</Button>

This applies inline style directly to the root element of the Button component.

An object that maps each part of the component to its respective class name. The "root" part is intentionally excluded from this, as the className property is used for the root element.

Type Definition:

classNames: Partial<Record<Part, string | undefined> & { root: never }>

Example:

<Button
	classNames={{
		label: 'text-body-20',
	}}
>
	Click here
</Button>

This applies text-body-20 class specifically to the label part of the Button component.

An object that maps each part of the component to its respective inline style. The "root" part is intentionally excluded from this, as the style property is used for the root element.

Type Definition:

styles: Partial<Record<Part, CSSProperties> & { root: never }>

Example:

<Button
	styles={{
		label: {
			fontSize: '1.25rem',
		},
	}}
>
	Click here
</Button>

This applies the inline style to the label part of the Button component.

✍️ Note: The classNames and styles props excludes the support for "root" part as the className and style props are specifically designated for the root element. This ensures that there is no conflict or redundancy when styling the root component.

• Partial Application: Since classNames and styles are partial objects, you don't need to provide values for every part. Only define what you need to customize.
• Type Safety: If you use Typescript, we enforce type safety to ensure that only valid parts of the component can be styled.
• No Root Duplication: By not including support for "root" in classNames and styles, the root element is exclusively styled via className and style, avoiding conflicts and maintaining clean, predictable styling logic.

You can easily identify the stylable parts of each component by referring to the StyleAPI section in the component's documentation page. Additionally, if you're using an IDE like Visual Studio Code, you can use Control + Space (or the equivalent in your IDE) within the classNames or styles prop to trigger IntelliSense, which will suggest available parts and provide a seamless development experience.