css - 如何去除卡入和设计的填充物？

Question

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

所以我需要删除为 .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的文档

您需要在bodyStylenot中覆盖样式cardStyle

bodyStyle: Inline style to apply to the card content

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

Answer 2

使用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 3

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

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

Answer 4

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

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

Answer 5

我对 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 的网站上找到太多关于覆盖样式的信息，仅在扩展组件方面。

Answer 6

你可以使用这个：

.cardStyle {
   padding: 0;
}

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

.cardStyle {
   padding: 0 !important;
}