Place the first element of array on left and rest all on left-CodePudding

Here is the component file

footer={[
    <Button icon="delete" ></Button>,
    <Button
      size="large"
      key="counter-offer-modal-cancel"
    >
      <Text>Cancel</Text>
    </Button>,
    <Button
      type="primary"
    >
      <Text>Done</Text>
    </Button>
]}

Here is the css file where the array elements have been styled:

.ant-modal-footer {
    display: flex;
    button:first-child {
        position: left;
    }
}

CodePudding user response：

Try to wrap your footer in a div , and then pass the first child the css:

<div className="footerWrapper">
<Button icon="delete" ></Button>,
            <Button
              size="large"
              key="counter-offer-modal-cancel"
            >
              <Text>Cancel</Text>
            </Button>,
            <Button
              type="primary"
            >
              <Text>Done</Text>
            </Button>
</div>

and in the css style:

.ant-modal-footer {
              display: flex;
              footerWrapper:first-child{
                float: left;
              }
            }

CodePudding user response：

You could add a margin-right: auto on the first button and it should do it. You don't need the position: left or float: left here.

.ant-modal-footer {
    display: flex;
    footerWrapper:first-child{
        margin-right: auto;
     }
 }