Material-ui: Change Request - Set typography color default to `inherit`

[sambhav-gore]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

This is a change request.
In My opinion, it would be helpful if the color prop of Typography is set to inherit by default.
It would also match expectation that when I set a color on a parent component then all children inherit the color (unless overridden).

Additionally, it would be awesome if this could be done for Icons as well.

Current Behavior

When I am working on a customised design, I am finding myself writing color="inherit" on Many of the Typography elements across components.

1. Create a new Component (I am making a menu) which adds child items recursively (which are different components)
2. Change Background color and color (text color) of parent component
3. Child components should have Typography elements.

Now even though the color is explicitly defined in parent component, still typography needs to have a prop.

Context

Having to specify color prop many times.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| React | |
| browser | |
| etc | |

[oliviertassinari]

Additionally, it would be awesome if this could be done for Icons as well.

@sambhav-gore I believe it's already the case.

it would be helpful if the color prop of Typography is set to inherit by default.

I have audited my code base. I have found the following occurrence for the usage of the Typography component:

• Default color: 88
• color="inherit": 23
• custom class color : 16
• color="primary": 0
• color="secondary": 0
• color="error": 0
• color="textSecondary": 0

So I'm against this change.

[leMaik]

@sambhav-gore

When I am working on a customised design, I am finding myself writing color="inherit" on Many of the Typography elements across components.

You could create a very simple wrapper for that: const InheritColorTypography = (props) => <Typography color="inherit" {...props} />

[sambhav-gore]

@leMaik this is a good suggestion, I didn't even think about it.

[oliviertassinari]

@sambhav-gore We are personally wrapping ~30 components from Material-UI on my project in order to apply some tweaks. It's IMHO the best approach to follow. I don't think that the component overhead has much impact in from the JavaScript VM perspective.

The main issue with the wrapping pattern is really about educating the team to use the "right" version of the components. I don't have a good answer to this problem. Having a storybook with the wrapped components can help. Using naming convention can help. Writing an eslint plugin forbidding direct import can help.

[sambhav-gore]

Thank you for consideration and the alternate solution is fine with me.