[Card] `CardContent` padding doesn't use spacing
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
CardContentRoot defines padding—and padding-bottom for the last child—with hardcoded values, without using the spacing from the theme.
Expected behavior 🤔
CardContentRoot defines padding—and padding-bottom for the last child—without hardcoded values, using the spacing from the theme.
Steps to reproduce 🕹
Context 🔦
While using MUI, I was expecting that all paddings and margins set in the different components would respect the spacing set within the theme.
Your environment 🌎
I'm using Chrome and Safari.
`npx @mui/envinfo`
System:
OS: macOS 11.6.4
Binaries:
Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.3/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
Browsers:
Chrome: 100.0.4896.75
Edge: Not Found
Firefox: 67.0.2
Safari: 15.1
npmPackages:
@emotion/react: ^11.7.1 => 11.7.1
@emotion/styled: ^11.6.0 => 11.6.0
@mui/base: 5.0.0-alpha.68
@mui/icons-material: ^5.4.4 => 5.4.4
@mui/material: ^5.4.1 => 5.4.1
@mui/private-theming: 5.4.1
@mui/styled-engine: 5.4.1
@mui/system: 5.4.1
@mui/types: 7.1.1
@mui/utils: 5.4.1
@types/react: ^17.0.24 => 17.0.39
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.1.2 => 4.5.5
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.
Research direction
Start in packages/mui-material/src/CardContent/CardContent.js at the referenced CardContentRoot definition. Compare its padding and last-child padding-bottom with the theme spacing API, then verify that both values respond to the configured theme spacing instead of remaining hardcoded. The issue does not name a test file, so inspect nearby CardContent tests for the appropriate place to cover the behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100