I have two Typography elements with default and caption variants. How do I center the content with align="center" property with variant as caption as this doesn't seem to work.

  render() {
    return (
      <div>
        <Typography align="center">Centered text</Typography>
        <Typography color="textSecondary" variant="caption" align="center">A Caption!</Typography>
      </div>
    );
  }

I created a working example using StackBlitz. Could anyone please help?

I have two Typography elements with default and caption variants. How do I center the content with align="center" property with variant as caption as this doesn't seem to work.

  render() {
    return (
      <div>
        <Typography align="center">Centered text</Typography>
        <Typography color="textSecondary" variant="caption" align="center">A Caption!</Typography>
      </div>
    );
  }

I created a working example using StackBlitz. Could anyone please help?

• javascript
• css
• reactjs
• material-ui
• typography

• variant="caption" is belongs to span thats why its not working – Raj Kumar Commented Jul 28, 2020 at 18:24
• @RajKumar Got it! Figured a way by wrapping the element in a Box and style my ponent. – scriobh Commented Jul 29, 2020 at 0:28

1 Answer 1

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function DisableElevation() {
  return (
    <div>
      <Typography align="center">Centered text</Typography>
      <Typography
        display="block"
        color="textSecondary"
        variant="caption"
        align="center"
      >
        A Caption!
      </Typography>
    </div>
  );
}