What are some ways I can enhance the typography within Material UI?

Currently, I am in the process of developing a custom theme utilizing createMuiTheme. However, my application requires more typography variants than what Material UI provides out of the box. I need to extend the typography so that it aligns with my specific requirements which includes 'h1', 'h2', and 'subtitle1' styles along with additional variants exclusive to my app. How can I go about achieving this customization?

Below is a snippet of the code:

const rawTheme: Theme = createMuiTheme({
  // Add your theme configuration here
});

I would greatly appreciate any assistance on how to accomplish this task.

cssreactjstypescriptmaterial-uinext.js

Answer №1

At this current time, there is no built-in way to achieve that specific customization. However, you have the flexibility to define overrides for the MuiTypography component for any variant other than the standard ones. These overrides will be applied when creating styles.

If you wish to accomplish your goal in a more practical manner, consider using a wrapper component. This wrapper can utilize default Typography components for standard variants while applying custom styles for non-standard variants.

import { Typography as MuiTypography, makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => // your Typography overrides are available here
const standardVariants = ['h1', ...]

export function Typography(props) {
  if (standardVariants.includes(props.variant)) return <MuiTypography {...props} />

  // your custom typograhy component
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are the menubar menus positioned beneath a different div element?

Currently facing an issue with an HTML Menubar where the menus are appearing below another div, and not getting displayed as expected: ...

htmlcsshover

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

htmlcsscss-selectors

Looking to effectively personalize various React MUI components?

I want to enhance the MUI component by adding more variations and new properties. Check out this screenshot of a React Example component: The Example component can be seen in the image above. I am seeking advice as I don't have much experience with ...

cssreactjsmaterial-ui

JavaScript causing Axios network error

Recently, I've started exploring the combination of axios and stripe in my project but unfortunately, I have encountered some challenges. Whenever I attempt to initiate a post request using axios, an error pops up which looks like this: https://i.sta ...

javascriptreactjsexpressaxios

Adding all the values together in an array

I am attempting to extract the values from the array based on their type, and then calculate the total by summing them using the function total(item). However, instead of getting a sum, the result is a concatenation of values. const App = (props) => { ...

reactjs

What are the steps to verify a gmail.com domain?

{ "data": null, "error": { "statusCode": 403, "message": "The gmail.com domain is not verified. Please, add and verify your domain on https://resend.com/domains", "name& ...

next.jsresend.com

Encountering a Hydration Error in Next.JS with Sanity integration when adding a Time Stamp

Does anyone have a solution for this issue? I keep getting a hydration error whenever I try to include a timestamp fetched from Sanity. This is how it appears on the page: <p className="font-extralight text-sm"> Post by <span c ...

reactjsnext.jssanityhydration

Encountering issues with StorybookConfig functionality following a review of MUI 5 migration documentation

I've been scouring the internet for a solution to my problem, but so far, nothing has worked for me. I'm struggling to make Storybook work with MUI 5 styling. Even after following the migration docs, the global font that I usually use doesn' ...

reactjsmaterial-uistorybook

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

javascripthtmlcssvue-componentvuejs3

Attempting to initiate the React App on PORT 3000 is the initial step in the process

I am currently facing an issue with running two react apps using pm2. One of the apps is successfully running on port 3000, but when I try to run the second app, it fails. Even though I have specified the port number as 3001 in the package.json file, I st ...

reactjsnpmsshpm2

Exploring the intricacies of identifying the notch in React Native

After thorough searching and checking, I came across these two informative resources: React-Native Detect Screen Notch https://github.com/ovr/react-native-status-bar-height Although I was able to detect the notch height, I am curious about more specific ...

reactjsreact-nativeresponsive-designflexbox

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

Struggling to incorporate a basic drop-down into my design despite implementing transitions

Looking to optimize space on a webpage, I am interested in creating a hover effect for topics that reveals sub-topics with a smooth ease-out animation. Here is an example of the effect I am aiming for: https://jsfiddle.net/170z6pj1/ I have been strugglin ...

htmlcsstransition

Exploring the intricacies of setting colspan in a Material-UI React table

I've utilized a Material React table by inserting the code <MaterialReactTable columns={columns} data={data} />. I'm interested in having a colspan that spans across two to three columns, like in the example below. Can this be achieved wit ...

reactjsmaterial-uimaterial-react-table

Import css background-images from a separate local directory that is located outside the root directory of the Next JS

I am facing a challenge with hosting a next.js app within the file structure of a parent website. I need the CSS in the app to use images that are located outside the app's file structure but within the parent website's file structure. Here is a ...

javascriptcssreactjsnext.js

I need help with formatting a div to look like this

Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one. Here's the example I have in mind: <a href="mks.html" class="big-tile big-tile-1"> <h1>town<br> libra ...

htmlcss

Is there a way to both add a property and extend an interface or type simultaneously, without resorting to using ts-ignore or casting with "as"?

In my quest to enhance an HTMLElement, I am aiming to introduce a new property to it. type HTMLElementWeighted = HTMLElement & {weight : number} function convertElementToWeighted(element : HTMLElement, weight : number) : HTMLElementWeighted { elemen ...

typescript

Adjust header display for smaller screens

Looking for help with adjusting my header design on small screens: I want the search bar to go underneath on smaller screens, like this example: I've tried changing the position to relative at a certain screen width but it didn't work. <di ...

htmlcssjsx

Inconsistent Accuracy of React Countdown Timer

Hello everyone! I'm new to programming and I'm currently working on creating a countdown timer that goes from 3 to 0. The issue I'm facing is that the timer counts down too quickly when rendered on the screen. I've tried adjusting the i ...

javascriptreactjs

Ways to modify the .MuiSelect-nativeInput element within Material-UI

const styles = makeStyles((theme) => ({ root: { margin: "0px 20px" }, textStyle: { fontFamily: "Comfortaa", }, container: {}, textField: { fontFamily: "Comfortaa", }, dropDownFormSize: { width: &qu ...

cssreactjsmaterial-uicss-selectorsjsx