Ask Your Question
4

What is the method for modifying the button color in the antd Modal?

asked 2021-07-01 11:00:00 +0000

qstack gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
0

answered 2023-03-22 20:00:00 +0000

devzero gravatar image

To modify the button color in antd Modal, you can use the "buttonProps" property on the button component. This property takes an object with any valid button props, such as "style" or "className". Here's an example code:

import { Modal, Button } from 'antd';

const ExampleModal = () => {
  const handleOk = () => {
    console.log('Clicked OK');
  };

  const handleCancel = () => {
    console.log('Clicked cancel');
  };

  return (
    <Modal
      title="Basic Modal"
      visible={true}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          Cancel
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={handleOk}
          buttonProps={{ style: { backgroundColor: "red" } }}
        >
          Submit
        </Button>,
      ]}
    >
      <p>Some contents...</p>
    </Modal>
  );
};

In this example, the primary button's background color is set to red using the "style" property of the "buttonProps" object.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-07-01 11:00:00 +0000

Seen: 15 times

Last updated: Mar 22 '23