How can I override an antd style?

I’m not sure if it is a bug or not, but in antd 2.7.0, the modal footer style looks like this:

.ant-modal-footer {
  border-top: ...
  padding: 10px 18px 10px 10px;
  text-align: ...
  border-radius: ...
}

Why is the padding-right 18px and not 10px? This creates asymmetry.

I’m trying to import a less file to override it:

@import "../../node_modules/antd/lib/style/themes/default.less";

: global {
  .ant-modal-footer {
    padding: 10px 10px 10px 10px;
  }
}

But it gets overridden by the default style.

[benjycui]

antd’s style:

.ant-btn { ... }

Your style:

.my-btn.ant-btn { ... }

Then, you can override it

[Loratadin]

antd’s style:

.ant-btn { ... }

Your style:

.my-btn.ant-btn { ... }

Then, you can override it

Can you kindly show how to achive this in react components, i’m unable to override any antd styled component and it’s killing me

In your js file you wrap antd button inside your own parent tag (e.g. “saveButtonWrapper”):

  <div className="saveButtonWrapper">
      <Button icon="check-circle">Save</Button>
  </div>

In less file nest the .ant-… classes inside your own parent tag’s className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:

.saveButtonWrapper {
      width: 120px;
      .ant-btn {
           width: 100%;
           background-color: @dark-navy;
           color: @white;
      }
      .ant-btn:hover,
      .ant-btn:focus,
      .ant-btn:active {
           border-color: @light-gray;
           background-color: @dark-gray;
           color: @white;
      }
      .anticon {
           color: @green,
           font-size: 16px;
           margin-right: 10px;
      }
}

If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.