Question

我正在使用蚂蚁设计来响应UI组件。我需要删除为蚂蚁设计卡提供的填充。

因此，我需要删除为.ant-card-wider-padding和.ant-card-body类提供的填充。我正在使用JSS来设计UI组件的样式。

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

我正在使用cardStyle类对蚂蚁设计卡进行样式设置。现在，我需要删除该卡中的填充。

Answer 1

根据Ant Design

的文档

您需要覆盖bodyStyle而不是cardStyle的样式

bodyStyle: Inline style to apply to the card content

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

Answer 2

我对JSS不太熟悉，但是如果正在应用您的其他样式，那么我认为问题不在于此。

我可以使用以下代码从卡中删除填充。

//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>

这给了我以下输出（卡是白框）：

我不确定这是否是定制antd组件的首选方法，但是我并没有在antd的网站上发现太多关于覆盖样式的内容，仅在extending components上有发现。

Answer 3

使用fullWidth道具删除填充。.，

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

Answer 4

您可以使用此：

.cardStyle {
   padding: 0;
}

如果不起作用，请使用此：

.cardStyle {
   padding: 0 !important;
}

Answer 5

尝试在您的scss / less中使用:global

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

Answer 6

非常简单，只需在Card组件中添加bodyStyle

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

如何去除卡片设计中的填充物？

6 个答案: