Getting ListItemText to inherit color is a pain

[jedwards1211]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I wish it were this easy:

<ListItemText color="inherit">Inherited Color</ListItemText>

Current Behavior

I have to do:

<ListItemText><Typography color="inherit">Inherited Color</Typography></ListItemText>

This is a pain. I could create a wrapper component that inherits the color, but that would also be a pain. Most Material UI components make it nice and easy to inherit the color.

Context

I have a sidebar containing <ListItems> with a dark background, so I want all of the <ListItemText> to be white, and it would be nice to be able to just inherit the white foreground color of the sidebar.

Your Environment

Tech	Version
Material-UI	v1.2.1

[oliviertassinari]

I have to do:

You also have to add disableTypography .

[jedwards1211]

Ah, I hadn't even tried, I was just guessing. So it takes even more text to do.
As a side note, I wish there were some magic way to reference the JSS class name for the ListItemText and Typography within the styles for my sidebar...then I could override the color there and it would be fairly clean. Maybe I can eventually think of a way to make that possible and propose it as a new feature in JSS.

[jedwards1211]

So I'm basically wishing we could add a color property to ListItem that gets forwarded to the primary Typography it renders. However, we would also need to handle the color in the case that disableTypography is true. What do you think?

[jedwards1211]

@oliviertassinari at the very least it would be helpful to have primaryProps and secondaryProps, in the same vein as inputProps on an Input component.

[oliviertassinari]

I wish there were some magic way to reference the JSS class name for the ListItemText and Typography within the styles for my sidebar

If I understand correctly what you are looking for. This should work:

<ListItemText classes={{ primary: 'your class' }} />

it would be helpful to have primaryProps and secondaryProps

I have no objection to adding a primaryTypographyProps and secondaryTypographyProps properties 👍 .

[jedwards1211]

@oliviertassinari but you're not open to a color prop that gets forwarded to the typography? I have a working clone of ListItemText that does that in my own project, so I could PR it pretty quickly...

[jedwards1211]

@oliviertassinari by the way, rendering <Typography> inside of <ListItemText disableTypography> would probably confuse the heck out of people who are just getting started in a project that uses Material UI:

<ListItemText disableTypography>
  <Typography color="inherit">Test</Typography>
</ListItemText>

It's not very elegant. We could check if the user passed in their own <Typography> and if so, not require them to use disableTypography.

[oliviertassinari]

but you're not open to a color prop that gets forwarded to the typography?

@jedwards1211 I think that it's too specific, the primary and secondary don't have the same color by default. Yeah, you can wrap the component. But I don't have a strong opinion about it. @mbrookes what do you think?

[oliviertassinari]

by the way, rendering inside of would probably confuse the heck out of people who are just getting started in a project that uses Material UI:

It's a good point. We might even make this behavior the default, so people don't have to provide disableTypography at all.

[mbrookes]

I agree with @oliviertassinari that primaryTypographyProps and secondaryTypographyProps` properties is the way to go for flexibility.

If we added color, we'd also then need secondaryColor, and there might still be the need for the typography props for some other use-case, so we potentially end up with four new properties.

[jedwards1211]

Okay. I wish there could be a PrimaryListItemText component, but unfortunately there would be no magic way to make the secondary text display underneath the primary text in an API like this:

<ListItem>
  <PrimaryListItemText color="inherit">Primary</PrimaryListItemText>
  <SecondaryListItemText>Secondary</SecondaryListItemText>
</ListItem>