Skip to content
Vy logo
Guides

Customising Component Styles

Spor components come with built-in styling based on our design tokens and design system guidelines.

Although we recommend using the default styles, it is possible to overwrite it on both theme-level and component-level.

Spor offers two levels of styling customization:

  1. Theme-level customization: Configure the SporProvider to apply styling changes across your entire application. This is useful for brand-specific theming or global adjustments.
  2. Component-level customization: Override styles on individual component instances to handle specific use cases. This gives you flexibility when you need to deviate from the standard design for a particular context.


🎨 Theme-level customization

You can customize the appearance of any component by overriding its recipe (or slot recipe) directly in your theme configuration, which you must pass to the SporProvider as explained above.

Example: Customizing Buttons
Override colors and other properties in the specific variants you want to change:

// import { themes, createSystem, defineConfig, Flex, Button, SporProvider } from "@vygruppen/spor-react";


() => {
    const config = defineConfig({
        theme: {
            recipes: {
                button: defineRecipe({
                    base: {
                        textDecoration: 'underline',
                        borderRadius: 'none',
                    },

                    variants: {
                        variant: {
                            primary: {
                                bg: 'blue',
                            },
                            secondary: {
                                bg: 'pink',
                            },
                        },
                    },
                }),
            },
        },
    })

    const system = createSystem(themes.VyDigital._config, config)

    return (
        <SporProvider theme={system}>
            <Flex gap="1">
                <Button variant="primary">Primary button customized</Button>
                <Button variant="secondary">Secondary button customized</Button>
            </Flex>
        </SporProvider>
    )
}

Important notes

  • Always override styles inside the specific variant(s) you want to affect (e.g. variants.variant.primary instead of only in base).
  • If you add new variants or change variants, run the type-generation command afterwards to update your types
  • The same approach works for slot recipes (multi-part components like Card, Dialog, Tabs, etc.).
  • Look at the recipes' code in spor for details about what to overwrite. Check out docs for recipesEkstern lenke and slot recipesEkstern lenke in chakra ui for more information about styling.


👁️ Component-level customization

Some of the Spor components is built using Chakra UI's slot-recipe system, which allows you to target and customize specific parts of a component. A slot-recipe is a styling pattern that breaks down a component into named "slots" – for example, Select might have slots for the trigger, label, indicator, etc.

You can override styles for individual component instances by passing custom styles to these slots, giving you precise control over appearance for specific use cases. To override the styles for this component globally across your project, refer to the documentation on customizing component styles.

To override the recipe styles use the selector format:

& [data-part="part"] {
  /* styles */
}

This can then be passed through the css-prop in the component. This is an example where we have done this for the Select component: 

() => {
    const transportationTypes = createListCollection({
        items: [
            {
                label: 'Train',
                value: 'train',
            },
            {
                label: 'Bus',
                value: 'bus',
            },
            {
                label: 'Boat',
                value: 'boat',
            },
        ],
    })
    return (
        <Select
            collection={transportationTypes}
            label="Choose transportation"
            css={{
                '& [data-part="trigger"]': {
                    backgroundColor: 'surface.highlight',
                },
                 '& [data-part="label"]': {
                    color: 'text.brand',
                },
            }}
        >
            {transportationTypes.items.map((item, index) => (
                <SelectItem key={index} item={item}>
                    {item.label}
                </SelectItem>
            ))}
        </Select>
    )
}