Typography span variant

[Fi1osof]

Both defaultHeadlineMapping variants body1 and body2 - p (paragraph) tag. Other variants are block-types too (h1-h6) and no one inline/inline-block.

I can do this by

component={(props) => {
  return <span
    {...props}
  />
}}

or

variant="body2"
headlineMapping={{
  body2: 'span',
}}

But it's not useful.

[Fi1osof]

UPD: as far as I understand, i can like this:

<Typography
  component="span"
>
  Span text
</Typography>

Is this best practice?

UPD2: This is not best practice(( Styles still for block element and color override parent.

.MuiTypography-body1-136 {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: Tahoma, Helvetica, sans-serif;
    line-height: 1.46429em;
}

<style>…</style>
.MuiTypography-root-127 {
    margin: 0;
    display: block;
}

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[kross-italk]

This is the #1 result for "material ui typography span inline text" and there is no accepted answer. There is nothing on Stack overflow for this question. You need to treat your community better

[joshwooding]

@kross-italk I think it’s kind of unfair to accuse us of treating our community badly considering how much time we spend answering questions and improving Material UI. Now to answer your question:

We changed Typography‘s implementation in v4 so it uses the default display for the element you choose i.e. inline for span. If you want to override this you can use the display prop e.g. display="inline"

[kgregory]

There is nothing on Stack overflow for this question

Seems like a good opportunity for you to change that! Have you asked the question there?

[julianwilkinson]

Hi~ Maybe I should reopen a diff issue but one thing about using Typography with display="inline" is it still renders it as <p> instead of a <span>— the implications being this may confuse users with screen readers

[Fi1osof]

@julianwilkinson i think you should use both display="inline" and component="span"

[julianwilkinson]

Ah! I didn't realize that was an option — thank you!