Theme Customization in Syncfusion^® React Components

This guide demonstrates multiple ways to customize the appearance of Syncfusion^® React Components, enabling you to design the UI according to your application's requirements. From global theme overrides to component-specific styling, this documentation covers various approaches to achieve your desired visual design.

CSS variables for design tokens

Syncfusion React themes provide CSS variables that enable you to override colors, typography, spacing, and other design tokens across all components. This approach ensures consistency throughout your application while maintaining the flexibility to adapt the visual design to your brand requirements. For reference, you can refer full list of CSS variables.

:root {
  --sf-color-primary: 80, 160, 180;
}

External stylesheet approach

Create reusable styles in external CSS files and apply them using the className prop. This method promotes separation of concerns and enables style reuse across multiple component instances.

Dynamic inline styles

Apply styles directly to components using JavaScript objects through the style prop. This approach is ideal for dynamic styling based on component state or props.