Mix and match horizontal and vertical form styles in antd 5

I have a form that I want to be in vertical mode. In it, there's a row with a bunch of checkboxes. I think the checkboxes look bad in horizontal, so I'd like to use the vertical layout just for that row.

I used to do this in antd 4 by adding an overridding css class.

Here is what the snippit of form items within the vertical form looks like:

<Row className="horizontal-override">
          <Form.Item name="Available" label="Available" valuePropName="checked">
            <Checkbox onChange={onInputChange} />
          </Form.Item>
          <Divider type="vertical" />
          <Form.Item name="ShipHomeOnly" label="ShipHome Only" valuePropName="checked">
            <Checkbox onChange={onInputChange} />
          </Form.Item>
          ...//More of the same
</Row>

The overriding css I had been using in 4 looks like this:

.ant-form{
  .horizontal-override{
    .ant-form-item{
      flex-direction: inherit;
      label{
        display: inline-flex;
        height: 32px;
        margin-right: 4px;
        align-items: center;
      }
    }
  }
}

This css would mimic the styles the form did if it was horizontal just for the row of checkboxes.

Now in antd version 5, the styling has changed drastically, and I can't figure out how to achieve this.

In antd, if you need to override styles in css, you need to search for classes inside dev console. It's very annoying but it's the only way at this moment.

In your case you need to change ant-form-item-row instead. I suppose in v5 devs added an extra div in layout:

.horizontal-override > .ant-form-item {
  flex-direction: inherit;

  .ant-form-item-row {
    display: inline-flex;
    height: 32px;
    flex-direction: row,
    flex-wrap: nowrap;
  }
}

I still would suggest you to put !important after each style so you'll make sure antd will not override this styles.

Also here you can find a working codesandbox example.