Berry React
v3.9.1
v3.9.1
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • AWS Cognito
    • Auth0
    • Firebase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
      • VITE
      • NextJS
    • Menu from the backend
    • Remove menu render via backend
  • Theme
    • Configuration
    • Presets
    • Style
      • Color
      • Typography
      • Overrides
      • Shadows
    • Layouts
    • Logo
  • How to
    • Remove eslint
    • Remove prettier
  • Components
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • Dependencies
    • Vite js
    • Next js
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • 🎺About - Berry Remix
  • Berry Eco System
Powered by GitBook
On this page

Was this helpful?

  1. Theme
  2. Style

Typography

Customize Theme Typography

You can customize the typography used in the theme as well from the central place.

For instance, If you want to change font-weight of the typography h5 to 900. To do that, open ..src\themes\typography.jsx and update as below:

typography.js
/**
 * Typography used in theme
 */
const Typography = (theme, borderRadius, fontFamily) => ({
    return {
        ...
        h5: {
            ...
            fontWeight: 900 // changed this to make it 900 from 500
        },
        ...
    };
});

This will apply to all places where you used Typography variants as h5

<Typography variant="h5"...>

Last updated 10 months ago

Was this helpful?