admin管理员组

文章数量:1023848

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
Share Improve this question asked Jul 28, 2020 at 18:01 scriobhscriobh 90012 silver badges27 bronze badges 2
  • 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
Add a ment  | 

1 Answer 1

Reset to default 7 
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>
  );
}

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
Share Improve this question asked Jul 28, 2020 at 18:01 scriobhscriobh 90012 silver badges27 bronze badges 2
  • 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
Add a ment  | 

1 Answer 1

Reset to default 7 
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>
  );
}

本文标签： javascriptAlign content to center with variant as caption in Material UI TypographyStack Overflow

版权声明：本文标题：javascript - Align content to center with variant as caption in Material UI Typography - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745514784a2153989.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。