Theme Customization in Syncfusion^® React Components

This guide demonstrates various ways to customize the appearance of Syncfusion^® React Components, enabling you to design the UI according to your application's requirements.

Inline styles via style Prop

Styles can be applied directly to a React component by using the style prop. This prop accepts a JavaScript object that defines the desired CSS properties and values.

import { Button } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
  return (
      <Button style={{ background: 'blue', fontSize: 16 }}>
        Button
      </Button>
  );
};

import { Button } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
  return (
      <Button style={{ background: 'blue', fontSize: 16 }}>
        Button
      </Button>
  );
};

External stylesheets

Define styles in an external CSS file and apply them using the className prop.

.sf-btn.button-green {
      color: white;
      background: green;
      font-size: 18px;
}

.sf-btn.button-green {
      color: white;
      background: green;
      font-size: 18px;
}

Example:

import { Button } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
  return (
      <Button className="button-green">
          Default Button
      </Button>
  );
};

import { Button } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
  return (
      <Button className="button-green">
          Default Button
      </Button>
  );
};

Theming using the React context API

Use React’s Context API to define and provide a theme across your application. This approach allows centralized control over component styles.

import { createContext, useContext, type ReactNode } from 'react';

type ThemeProviderProps = {
  children: ReactNode;
  value: any;
};
const ThemeContext = createContext({ color: 'black', background: 'white' });

export function useTheme() {
  return useContext(ThemeContext);
}

export function ThemeProvider({ children, value }: ThemeProviderProps) {
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

import { createContext, useContext, type ReactNode } from 'react';

type ThemeProviderProps = {
  children: ReactNode;
  value: any;
};
const ThemeContext = createContext({ color: 'black', background: 'white' });

export function useTheme() {
  return useContext(ThemeContext);
}

export function ThemeProvider({ children, value }: ThemeProviderProps) {
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

This example shows how the Button component can consume the theme context to apply consistent, centralized theming throughout the app.

import { ThemeProvider, useTheme } from './themeContext';
import { Button } from '@syncfusion/react-buttons';
import './App.css';

function StyledButton() {
  const theme = useTheme();
  return (
    <Button style={{ color: theme.color, background: theme.background }}>
      Themed Button
    </Button>
  );
}

export default function App() {
  const theme = { color: 'white', background: '#1976d2' };
  return (
    <ThemeProvider value={theme}>
      <StyledButton />
    </ThemeProvider>
  );
}

import { ThemeProvider, useTheme } from './themeContext';
import { Button } from '@syncfusion/react-buttons';
import './App.css';

function StyledButton() {
  const theme = useTheme();
  return (
    <Button style={{ color: theme.color, background: theme.background }}>
      Themed Button
    </Button>
  );
}

export default function App() {
  const theme = { color: 'white', background: '#1976d2' };
  return (
    <ThemeProvider value={theme}>
      <StyledButton />
    </ThemeProvider>
  );
}

Using styled-components

The styled-component library library allows you to write actual CSS in your JavaScript, enabling dynamic styling and scoped styles.

For more details on styled-components features in React Components, refer to the styled-component documentation.

Applying global styles

Users can apply global styles using either traditional CSS or styled-components.

Global CSS styles are typically placed in a file like global.css. This file contains style rules that apply to HTML elements everywhere in your application. By defining styles in one place, you can ensure consistent formatting and colors across different pages and components.

body { 
  background: #fafafa; 
}
h1 { 
  color: #1976d2; 
}

body { 
  background: #fafafa; 
}
h1 { 
  color: #1976d2; 
}

Using styled-components with global Styles

Use styled-components to define and apply global styles across your application.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body { background: #000000; }
  h1 { color: #1976d2; }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Hello World</h1>
    </>
  );
}

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body { background: #000000; }
  h1 { color: #1976d2; }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Hello World</h1>
    </>
  );
}