How to removing the padding for card in and design?

css reactjs antd jss
Ajay Jayendran picture Ajay Jayendran · Sep 30, 2018 · Viewed 8.5k times · Source

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

enter image description here

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.

Answer

onyx picture onyx · Sep 30, 2018

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>

Related questions

How to customize Ant.design styles

Who knows how to customize Ant.design styles in proper way? For example, I want to change the default backgroundColor and height of Header section: import React, { Component } from 'react'; import { Form, Layout } from 'antd'; const { Header, Footer, Sider, Content } = …

Read More
In Ant Design, how can we center <Icon> vertically in <Row>?

Please see my React code example: import React from 'react'; import { Row, Col, Icon } from 'antd'; const MyRow = () => ( <Row type="flex" align="middle"> <Col md={10}>Trouble is a friend</Col> <Col md={10}&…

Read More
How to change the style of a Ant-Design 'Select' component?

Suppose I want to change the standard white background color of the Select component to green. My try... <Select style={{ backgroundColor: 'green' }}> // Options... </Select> ...didn't do it. Can someone point me in the right direction? [EDIT] …

Read More