How to removing the padding for card in and design?

Question

I am using ant design to react UI components. I need to remove the padding given for the ant design card.

So I need to remove the padding given for the classes .ant-card-wider-padding and .ant-card-body.I am using JSS for styling the UI components.

cardStyle: {
    marginTop: '30px',
    boxShadow: '0px 1px 10px rgba(0,1,1,0.15)',
    backgroundColor: '#ffffff',
    borderStyle: 'solid',
    outline: 'none',
    width: '100%',
  },

i am using cardStyle class to styling ant design card.Now i need to remove the padding in that card.

Tallith

But what is your question. I mean you're already styling the cards so why don't you add padding: 0 aswell? – Edrick

Yeah, I tried with that by giving zero padding in that. it is not working. – Tallith

It happens when you nest Cards. – Trustee

Answer 1

From the documentation of Ant Design

You need to override the style in bodyStyle not cardStyle

bodyStyle: Inline style to apply to the card content

<Card title="Card title" bodyStyle={{padding: "0"}}>Card content</Card>

Nunes

no, I tried that.it is not working. Ant design has default styles for the components. – Tallith

Adding that padding should override the default Ant design style. Unless the Ant design style is applied to another element. – Nunes

Even though i applied padding it takes the default padding over there – Tallith

Have you tried .cardStyle .ant-card-wider-padding .ant-card-body { padding: 0} ? Can you provide the HTML? – Nunes

can we give multiple CSS styles over the component? I am talking about react components – Tallith

Answer 2

use fullWidth props for removing padding..,

<Card.Section fullWidth>
            <ResourceList
              items={[
                {
                  id: 341,
                  url: 'customers/341',
                  name: 'Mae Jemison',
                  location: 'Decatur, USA',
                }
              ]}
              renderItem={
                (item) => {
                  const {id, url, name, location} = item;
                  const defaultImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNLS4wMi0uMDFoMTAwdjEwMGgtMTAweiIgZmlsbD0iI2ZmZTBjMyIvPjxwYXRoIGZpbGw9IiNmZjk2N2QiIGQ9Ik0wIDBoNjkuNDF2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjkyIDB2NDQuMzJMNTEuMzQgNTV2NDVIMTAwVjB6IiBmaWxsPSIjZmZlMGMzIi8+PHBhdGggZmlsbD0iIzMyY2FjNiIgZD0iTTM5LjMyIDc2YTExLjg1IDExLjg1IDAgMCAwIDEyIDExLjYyVjc2Ii8+PHBhdGggZmlsbD0iIzAwOTc5NiIgZD0iTTM5LjMyIDc2YTEyIDEyIDAgMCAxIDEyLTExLjgyVjc2Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNDMuNzQgMTkuODNhMTIuODIgMTIuODIgMCAxIDEtMjUuNjQgMCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTI3LjM5IDMxLjZsLTEuNTggNS45Nm05LjM3LTUuNzJsMi41NSA1LjQ3bTQuMjYtOS44NWwzLjUzIDQuNW0tMjUuNDMtNC41bC0zLjUzIDQuNSIvPjwvc3ZnPgo=" ;
                  const media = <Thumbnail source={defaultImage} size="small" name={name} />;

                  return (
                    <ResourceList.Item id={id} url={url} media={media}>
                      <Stack alignment="center">
                        <Stack.Item fill>
                          <TextStyle>{name}</TextStyle>
                        </Stack.Item>
                        <Stack.Item>
                          <TextStyle>Last changed</TextStyle>
                        </Stack.Item>
                        <Stack.Item>
                          <Button>Edit Giffy</Button>
                        </Stack.Item>
                      </Stack>
                    </ResourceList.Item>
                  );
                }
              }
            />
          </Card.Section>

Azine

Answer 3

very simple just add bodyStyle in Card Component

<Card bodyStyle={{ padding: "0"}}>

Cowpox

For those interested in an Angular solution, use something of this sort [nzBodyStyle]="{padding: '0'}" – Craiova

deprecated bodyStyle 2024 – Cheesecake

deprecated ... 2024 You can use <Card size="small" > – Sturtevant

Answer 4

You can use this:

.cardStyle {
   padding: 0;
}

If didn't work, use this:

.cardStyle {
   padding: 0 !important;
}

Treharne

Answer 5

I'm not too familiar with JSS but if your other styles are being applied then I assume the issue is not with that.

I was able to remove the padding from the card with the following code.

//style.less
.panelcard { ... }
.panelcard .ant-card-body {
  padding: 0;
}

// panelCard.js
import { Card } from 'antd';

require('./style.less');

const PanelCard = ({ children }) => {
  return (
    <Card className='panelcard'>
      {children} // <p>Some Child Component(s)</p>
    </Card>
  );
}

// invocation
<PanelCard label='Panel Title'>
  <p>Some Child Component(s)</p>
</PanelCard>

This gave me the following output (card is the white box):

I am not sure if this is the preferred way of customizing antd's components but I didn't really find too much on antd's website about overriding styles, only on extending components.

Inevasible

Answer 6

Try using :global in you scss/less

div { // or any parent element/class
  :global {
    .ant-card-body {
        passing: <number>px; // number can be 0 onwards
    }
  }
}

Lp