# Baseui responsive typography

theme.js

// Create custom theme
import { createTheme, lightThemePrimitives } from 'baseui';

// Responsive typography
const overrides = {
  typography: {
    HeadingXXLarge: { // H1
      [mediaQuery.small]: {
        fontSize: '28px',
      },
      [mediaQuery.medium]: {
        fontSize: '36px',
      },
      [mediaQuery.large]: {
        fontSize: '48px',
      },
    },
  },
};

const customTheme = createTheme(lightThemePrimitives, overrides);

Root.js

// Pass custom theme to theme provider 
<ThemeProvider theme={customTheme}>
  {...}
</ThemeProvider>