Style Componentslink

In Radzen Blazor Studio, you can style your app in two ways — globally across the whole app, or locally for a single component.

Use app-wide styling for consistency; use local (component instance) styling for one-off tweaks.

App-wide Styles via Themeslink

These styles live in your app’s theme and are edited from the Appearance panel.

In the appearance panel you adjust theme properties that define the overall look and feel of your application. These properties exist at three levels:

• Global level properties, e.g. primary color
• Context level properties, e.g. focused state border
• Component level properties. These are the component-specific details you'd like to edit, such as the input border radius or DataGrid background color.

Remember: Edits made via the Appearance panel are applied accross the whole application.

Theme edits are written to your app’s site.css file. You can open and adjust this file directly if you want to fine-tune styles or review them in version control.

You can also export and import styles to reuse them across multiple Radzen Blazor apps.

Learn more about Themes and Swatches or see how to Customize a theme.

Local Styles via the Styles Tablink

Local styles apply only to the selected component or HTML element. They are edited from the Styles tab in the Properties panel.

The Styles tab contains:

Theme Variableslink

Modify theme-driven properties for that specific component (for example, background color or border style).

These settings override the theme’s defaults for that instance only.

Generic Styleslink

Apply generic CSS rules such as margins, padding, font size, or alignment.

Remember: Local style changes are added inline to the component’s style attribute and do not update the site.css file. Local styles always override global theme styles for that component.