MuiListItemText-secondary overrides custom theme color for typography variant

When using a <ListItemText/> component with the secondaryTypographyProps set to use a custom variant with a color value, the default color rgba(0, 0, 0, 0.6) overrides the custom variant color.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Setting a custom theme color gets overridden by the default palette.text.secondary.

Expected Behavior 🤔

Setting the color attribute for a custom typography variant should display properly

Steps to Reproduce 🕹

https://codesandbox.io/s/muilistitemtext-bug-6y9k1

Custom theme…

typography: {
      header3Bold: {
        color: Constants.arrivedDark,
        fontFamily: apercuFonts,
        fontSize: getFontSize(700, isMobile),
        fontWeight: 700,
        lineHeight: '1.133em',
      },
},

Context 🔦

Using a custom typography variant with the color css attribute gets overridden by the default palette.text.secondary.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: macOS 11.4
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: Not Found
    npm: 7.14.0 - ~/.nvm/versions/node/v15.14.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.1
  npmPackages:
    @emotion/react: ^11.1.5 => 11.1.5
    @emotion/styled: ^11.3.0 => 11.3.0
    @material-ui/codemod: ^5.0.0-alpha.35 => 5.0.0-alpha.35
    @material-ui/core: ^5.0.0-alpha.38 => 5.0.0-alpha.38
    @material-ui/icons: ^5.0.0-alpha.37 => 5.0.0-alpha.37
    @material-ui/lab: ^5.0.0-alpha.38 => 5.0.0-alpha.38
    @material-ui/private-theming:  5.0.0-alpha.36
    @material-ui/styled-engine:  5.0.0-alpha.34
    @material-ui/system:  5.0.0-alpha.38
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.38
    @material-ui/utils:  5.0.0-alpha.36
    @types/react: ^17.0.2 => 17.0.3
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    styled-components: ^5.2.1 => 5.2.3
    typescript: ^4.2.3 => 4.2.4

[siriwatknp]

// ListItemText.js
if (secondary != null && secondary.type !== Typography && !disableTypography) {
    secondary = (
      <Typography
        variant="body2"
        className={classes.secondary}
        color="text.secondary" // <----- turned to `sx` overrides
        display="block"
        {...secondaryTypographyProps}
      >
        {secondary}
      </Typography>
    );
  }

@mnajdova because the color is forced in the ListItemText, that’s why the color from theme (typography variant) is overridden.

[EliRobinson]

Ok, I’ll go with a one-off styled solution. I’ll keep following this to see where we land with the order of priority in terms of colors on the secondary text.