I found that Material UI has 13 different variants for Typography component. While doing project at company I am working I came across with problem, where I need it to add extra Typography variant. In this tutorial, I will show you how to add extra Typography variants in Material UI.
Material UI version 5.1.0 supported in this tutorial.
Create New React Project
npx create-react-app my-app
cd my-app
npm start
Install Material UI
// with npm
npm install @mui/material @emotion/react @emotion/styled
// with yarn
yarn add @mui/material @emotion/react @emotion/styled
Setup theme
Let's create our theme with our extra typographies
theme.js
export const theme = createTheme({
typography: {
body1_medium: {
lineHeight: 1.6,
fontSize: 24,
fontWeight: 500,
},
body2_medium: {
lineHeight: 1.6,
fontSize: 18,
fontWeight: 500,
},
p1_italic: {
lineHeight: 2.6,
fontSize: 26,
fontStyle: "italic",
fontWeight: 800,
},
p1_bold: {
lineHeight: 2.6,
fontSize: 22,
fontStyle: "bold",
fontWeight: 700,
},
p1_error: {
fontStyle: "bold",
fontWeight: 300,
color: "red",
},
p2_highlighted: {
fontStyle: "italic",
fontWeight: 500,
backgroundColor: "yellow",
},
},
});
ATTENTION
I am only showing you to add extra Typography variants, that's why I won't be touching default Typography variants. Variant names are just for demonstration purposes
Add your custom theme to ThemeProvider
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "./theme";
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.getElementById("root")
);
Usage
import Typography from "@mui/material/Typography";
function App() {
return (
<div className="App">
<Typography variant="body1_medium">
Lorem Ipsum is simply dummy text of the industry.
</Typography>
<br />
<Typography variant="body2_medium">
Lorem Ipsum is simply dummy text of the industry.
</Typography>
<br />
<Typography variant="p1_error">
Lorem Ipsum is simply dummy text of the industry.
</Typography>
<br />
<Typography variant="p1_italic">
Lorem Ipsum is simply dummy text of the industry.
</Typography>
<br />
<Typography variant="p2_bold">
Lorem Ipsum is simply dummy text of the industry.
</Typography>
<br />
<Typography variant="p2_highlighted">
Lorem Ipsum is simply dummy text of the industry.
</Typography>
</div>
);
}
export default App;
Result
Full source code available on Github
Top comments (0)