Typography with Material-UI

Typography is a Material-UI component to present your design and content as clearly and efficiently as possible.

Typography is a Material-UI component to present your design and content as clearly and efficiently as possible. In this blog, you are going to learn about Typography component of Material-UI.

This blog is part of the Material-UI basics video series on Cules Coding YouTube channel.

Watch the video about Material-UI Typography:

Watch the full video series Material-UI basics

What is a Typography component?

Typography is simply a component that handles the text based content of your application like paragraphs, headers etc.

Usage

It is very easy use Typography component. Just import and insert on your application.

import React from 'react'
import Typography from '@material-ui/core/Typography'

const Text = () => {
    return (
        <div>
            <Typography>This is a Typography component.</Typography>
        </div>
    )
}

export default Text

It will give you a body1 text.

Apply styles to Typography with variant Prop

Variant Prop will allow you use different type of style like h1, h2, body2, subtitle1, subtitle2, caption etc.

import React from 'react'
import Typography from '@material-ui/core/Typography'

const Text = () => {
    return (
        <div>
            <Typography>This is a Typography component.</Typography>
            <Typography variant='h1'>This a H1 text</Typography>

            <Typography variant='body2'>This a body2 text</Typography>

        </div>
    )
}

export default Text

Change tags with component prop.

Suppose you want to use h1 tag but want to use h5 style. You can easily do it with Component Prop

import React from 'react'
import Typography from '@material-ui/core/Typography'

const Text = () => {
    return (
        <div>
            <Typography>This is a Typography component.</Typography>
            <Typography variant='h1'>This a H1 text</Typography>

            <Typography variant='body2'>This a body2 text</Typography>

            <Typography component='h1' variant='h5'>
                This a h5 text
            </Typography>

        </div>
    )
}

export default Text

You can also use react component

import React from 'react'
import Typography from '@material-ui/core/Typography'

const Text = () => {
    return (
        <div>
            <Typography>This is a Typography component.</Typography>
            <Typography variant='h1'>This a H1 text</Typography>

            <Typography variant='body2'>This a body2 text</Typography>

            <Typography component='h1' variant='h5'>
                This a h5 text
            </Typography>

            <Typography component={Button}>This a h5 text</Typography>
        </div>
    )
}

export default Text

We have used material-ui Button as a component

Change colors

You can change colors with color props. Check the documentation for the color values

import React from 'react'
import Typography from '@material-ui/core/Typography'

const Text = () => {
    return (
        <div>
            <Typography>This is a Typography component.</Typography>
            <Typography variant='h1'>This a H1 text</Typography>

            <Typography variant='body2'>This a body2 text</Typography>

            <Typography component='h1' variant='h5'>
                This a h5 text
            </Typography>

            <Typography component={Button}>This a h5 text</Typography>

            <Typography color='primary' variant='h1'>
                This a Primary text
            </Typography>
            <Typography color='secondary' variant='h1'>
                This a Secondary text
            </Typography>
            <Typography color='error' variant='h1'>
                This a Error text
            </Typography>
        </div>
    )
}

export default Text

Align text

You can easily align text with align property.

import React from 'react'
import Typography from '@material-ui/core/Typography'

const Text = () => {
    return (
        <div>
            <Typography>This is a Typography component.</Typography>
            <Typography variant='h1'>This a H1 text</Typography>

            <Typography variant='body2'>This a body2 text</Typography>

            <Typography component='h1' variant='h5'>
                This a h5 text
            </Typography>

            <Typography component={Button}>This a h5 text</Typography>

            <Typography color='primary' variant='h1'>
                This a Primary text
            </Typography>
            <Typography color='secondary' variant='h1' align='center'>
                This a Centered aligned Secondary text
            </Typography>
            <Typography color='error' variant='h1' align='right'>
                This a Error text
            </Typography>

        </div>
    )
}

export default Text

So, that's it for today. Watch my video about typography. If you have any question, please comment down below.
If you want to reach out to me, You can follow me on any social media as @thatanjan. Until then stay safe and good bye.

About me:

Who am I?

My name is Anjan. I am a full stack web developer from Dhaka, Bangladesh.

What problems do I solve?

I can create complex full stack web applications like social media application, blogging, e-commerce website and many more.

Why do I do what I do?

I love to solve problems and develop new ideas. I also enjoy sharing my knowledge to other people who are wiling to learn. That's why I write blog posts and run a youtube channel called Cules Coding

Think we should work together?

Feel free to contact me

Email: anjancules@gmail.com

linkedin: @thatanjan

portofolio: anjan

Github: @thatanjan

Instagram (personal): @thatanjan

Instagram (youtube channel): @thatanjan

twitter: @thatanjan

About My channel:

Why would you subscribe to Cules Coding?

Cules Coding will teach you full stack development. I will teach you not only the basic concepts but also the advanced concepts that other youtube channels don't cover. I will also teach you Data Structures and Algorithms with abstraction and without Math. You will also find many tutorials about developer tools and technologies. I also explain advanced concepts and technologies with simplicity.

So what are you waiting for?

Subscribe to Cules Coding so that my friend you don't miss any of these cool stuffs.