MuiListItemText-secondary overrides custom theme color for typography variant
Open
@mnajdova is already working on this.
Since Jul 19, 2021.
scope: list
type: bug
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.