Styling

Use the typed Classes and Styles maps to target specific parts of its markup.

Recommended approach

The preferred way to style components is still the simple Class and Style parameters. They apply to the primary element rendered by the component and behave consistently across CSS providers.

<Card Class="component-styling-card" Style="border: 2px dashed #0b7285; padding: 1rem;">
    <CardBody>
        <CardTitle Size="HeadingSize.Is4">
            Class and Style
        </CardTitle>
        <CardText>
            Use <Code>Class</Code> and <Code>Style</Code> for the element rendered by the component.
        </CardText>
    </CardBody>
</Card>

Advanced customization

Some components render multiple HTML elements (wrappers, containers, inputs, etc.). For those components, Blazorise exposes typed Classes and Styles parameters so you can style individual parts without relying on fragile CSS selectors.

Typed Classes and Styles maps are resilient to provider markup differences and are self-documenting and discoverable, making them safer than fragile selectors.

Each component that supports this exposes its own *Classes and *Styles record types. The common Self property targets the main element rendered by the component, while additional properties map to the component structure (for example Wrapper, Content, or Input).

Example class map for a card: new CardClasses { Self = "card-root", Wrapper = "card-col" }

Use Classes and Styles only when you need to reach elements that Class and Style cannot. If a component does not expose Classes or Styles, it renders a single element and should be styled with Class and Style.

Example scenario: when a Table is responsive, use TableClasses or TableStyles to style the container wrapper while keeping Class/Style for the table itself.

<CardDeck>
    <Card Classes='@(new CardClasses { Self = "component-styling-self", Wrapper = "component-styling-wrapper" })'
          Styles='@(new CardStyles { Self = "border: 2px solid #1c7ed6; border-radius: 0.5rem;", Wrapper = "padding: 0.5rem; background: #f1f3f5;" })'>
        <CardBody>
            <CardTitle Size="HeadingSize.Is4">
                Classes and Styles
            </CardTitle>
            <CardText>
                Targets the card element and wrapper when the provider renders it.
            </CardText>
        </CardBody>
    </Card>
    <Card Classes='@(new CardClasses { Self = "component-styling-self", Wrapper = "component-styling-wrapper" })'
          Styles='@(new CardStyles { Self = "border: 2px solid #2f9e44; border-radius: 0.5rem;", Wrapper = "padding: 0.5rem; background: #ebfbee;" })'>
        <CardBody>
            <CardTitle Size="HeadingSize.Is4">
                Wrapper example
            </CardTitle>
            <CardText>
                Wrapper styles are ignored if the provider does not render a wrapper.
            </CardText>
        </CardBody>
    </Card>
</CardDeck>

Utility Targets

Utility helpers like Margin, Padding, Width, and Height target the component element by default. Use UtilityTarget to move those utilities to a wrapper element when the provider renders extra markup.

<CardDeck>
    <Card UtilityTarget="UtilityTarget.Wrapper" Padding="Padding.Is2">
        <CardBody>
            <CardTitle Size="HeadingSize.Is4">
                Example 1
            </CardTitle>
            <CardText>
                Utility spacing targets the wrapper element.
            </CardText>
        </CardBody>
    </Card>
    <Card Margin="Margin.Is3.OnWrapper">
        <CardBody>
            <CardTitle Size="HeadingSize.Is4">
                Example 2
            </CardTitle>
            <CardText>
                Or make it more specific by targeting only the wrapper element for margin utilities.
            </CardText>
        </CardBody>
    </Card>
</CardDeck>

Supported keys overview

Quick reference for common components and their extra keys. This list is not exhaustive, check each component's *Classes and *Styles type for the complete set of supported properties.

Some keys apply only for specific CSS providers or only when a configuration option causes extra markup to render.

If a key has no effect, the element might not be rendered by that provider or configuration, and any unsupported keys are ignored.

Provider support matrix

The matrix below applies to both Classes and Styles. A green check means the provider renders the element, while a red times means the key has no effect.