[Card] `CardContent` padding doesn't use spacing
See original GitHub issueDuplicates
- 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
Issue Analytics
- State:
- Created a year ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Cant remove padding-bottom from Card Content in Material UI
I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work. const styles = theme => ({...
Read more >How to improve your card style with spacing - Capsens
A few general rules on spacing · 1) Don't be afraid to use margins and padding · 2) Don't forget to use them...
Read more >Card component — Vuetify
Components that have no listed options use Vue's functional component ... Provides a default font-size and padding for card subtitles.
Read more >Now Component Library | ServiceNow Developers
Use the small padding size with a small font size or to keep the card content compact. small padding size within a card...
Read more >Card - Formula Design System - Microsoft Developer
Spacing and style. Cards have a default padding of 20px on desktop; Header and footer areas may use 16px vertical padding instead; The...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Let’s create a PR per component, it is easier to review and backtrack in case there are regressions. However, this can break some apps. I wonder if we should do this in v6 (for all components to use the theme.spacing)
Sounds like a good approach, and it will be a breaking change for sure, so doing it for v6 seems like the right thing to do. On the other hand, I’m surprised this hasn’t been taken into account before as it is quite important for a design system. Maybe people also expect like me that paddings & margins would respect their spacing, and in that case, we would be fixing their apps. But I think that’s for them to decide.
To start creating PRs, does it change anything on my side if the improvements will be released in the next minor or the next major?