Search code examples
cssreactjsweb-componentantd

How to find all of the style attributes I can edit in ant design component?

I'm trying to create an ant design card that has a border only on the left and right side of the card. The bordered attribute that I can directly edit in the card component either removes the entire border or none of the border. I want to be able to specify aspects of the border in an inline style. Where/how do I find what inline style attributes I can edit?

<Card
    bordered={false}
    style={{
    // how do I find all of the attributes I can edit right here
    }}
>
Solution

  • You can do it via the Development tools on the page in browser:

    In the Elements panel choose the desired element and go to Styles tab:

    <div class="ant-card ant-card-bordered" style="border-top: 1px;border-bottom: 1px;width: 300px;">

    Styles tab: 

    .ant-card-bordered {
border: 1px solid #e8e8e8;
border-top-color: rgb(232, 232, 232);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(232, 232, 232);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(232, 232, 232);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(232, 232, 232);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;