Typography
The Typography
component is used to render text with the correct typography style.
Headline 1
Set the type
to headline-1
to render as a h1
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Headline1Example(): ReactElement {
return <Typography type="headline-1">Hello</Typography>;
}
Headline 2
Set the type
to headline-2
to render as a h2
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Headline2Example(): ReactElement {
return <Typography type="headline-2">Hello</Typography>;
}
Headline 3
Set the type
to headline-3
to render as a h3
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Headline3Example(): ReactElement {
return <Typography type="headline-3">Hello</Typography>;
}
Headline 4
Set the type
to headline-4
to render as a h4
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Headline4Example(): ReactElement {
return <Typography type="headline-4">Hello</Typography>;
}
Headline 5
Set the type
to headline-5
to render as a h5
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Headline5Example(): ReactElement {
return <Typography type="headline-5">Hello</Typography>;
}
Headline 6
Set the type
to headline-6
to render as a h6
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Headline6Example(): ReactElement {
return <Typography type="headline-6">Hello</Typography>;
}
Subtitle 1
Set the type
to subtitle-1
to render as a h6
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Subtitle1Example(): ReactElement {
return <Typography type="subtitle-1">Hello</Typography>;
}
Subtitle 2
Set the type
to subtitle-2
to render as a h6
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Subtitle2Example(): ReactElement {
return <Typography type="subtitle-2">Hello</Typography>;
}
Body 1
Set the type
to body-1
to render as a p
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Body1Example(): ReactElement {
return <Typography type="body-1">Hello</Typography>;
}
Body 2
Set the type
to body-2
to render as a p
element with the corresponding typography.
Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function Body2Example(): ReactElement {
return <Typography type="body-2">Hello</Typography>;
}
Caption
Set the type
to caption
to render as a caption
element with the corresponding typography.
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function CaptionExample(): ReactElement {
return (
<table>
<Typography type="caption">Hello</Typography>
</table>
);
}
Overline
Set the type
to overline
to render as a span
element with the corresponding typography.
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";
export default function OverlineExample(): ReactElement {
return <Typography type="overline">Hello</Typography>;
}
Custom Typography Element
The typography styles can also be applied to other elements by using the as
prop or using the typography
class name utility function.
Paragraph
import { Box } from "@react-md/core/box/Box";
import { Typography } from "@react-md/core/typography/Typography";
import { typography } from "@react-md/core/typography/typographyStyles";
import { type ReactElement } from "react";
export default function CustomTypographyElement(): ReactElement {
return (
<Box stacked>
<Typography type="headline-1" as="p">
Paragraph
</Typography>
<div className={typography({ type: "headline-3" })}>Div</div>
</Box>
);
}
Customizing Typography
The default typography can be configured by overriding the different typography
Sass variables when @forward
ing or @use
ing react-md
. The typography types
can be customized by:
- providing
{TYPE}-custom-styles
map which would be merged and override any values in the{TYPE}-recommended
styles map - providing a
{TYPE}-styles
map which allows full control and ignores the recommended styles
So the variables for each typography type are:
- core.$base-custom-font-styles which is applied to all
{TYPE}-recommended-styles
headline-1
:headline-2
:headline-3
:headline-4
:headline-5
:headline-6
:subtitle-1
:subtitle-2
:body-1
:body-2
:caption
:overline
:
The example below shows how to customize the default font family, font-weight, and some typography types.
headline-1
headline-2
headline-3
headline-4
headline-5
headline-6
subtitle-1
subtitle-2
caption
overline