Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Card] `CardContent` padding doesn't use spacing

See original GitHub issue

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.

See https://github.com/mui/material-ui/blob/585c4a3850936d7ddcd60ed4ad063996415e0f3a/packages/mui-material/src/CardContent/CardContent.js#L25-L27.

Expected behavior 🤔

CardContentRoot defines padding—and padding-bottom for the last child—without hardcoded values, using the spacing from the theme.

Steps to reproduce 🕹

See https://github.com/mui/material-ui/blob/585c4a3850936d7ddcd60ed4ad063996415e0f3a/packages/mui-material/src/CardContent/CardContent.js#L25-L27.

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 GitHub Comments

1reaction

siriwatknpcommented, Apr 8, 2022

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)

0reactions

dani-mpcommented, Apr 8, 2022

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?