Как убрать прокладку для карточки и дизайна?

Question

Я использую Ant Design для взаимодействия компонентов пользовательского интерфейса.Мне нужно удалить отступы, указанные для карты дизайна муравья.

Поэтому мне нужно удалить отступы, указанные для классов .ant-card-более широкие отступы и .ant-card-body. Я использую JSS для стилизации компонентов пользовательского интерфейса.

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

Я использую класс cardStyle для стилизации муравьиного дизайна карты. Теперь мне нужноудалить отступы в этой карточке.

Answer 1

очень просто, просто добавьте bodyStyle в Компонент карты

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

Answer 2

Попробуйте использовать :global в вашем scss / less

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

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

Я не слишком знаком с 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 5

Вы можете использовать это:

.cardStyle {
   padding: 0;
}

Если не сработало, используйте это:

.cardStyle {
   padding: 0 !important;
}

Answer 6

Из документации Ant Design

Вам необходимо переопределить стиль в bodyStyle, а не cardStyle

bodyStyle: Inline style to apply to the card content

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