记录一次antd ProComponents ProFormGroup 样式层级问题

前言
ProFormGroup会把多个表单项合并成表单项中的一个，类似下图：

需求
表单项里有两层ProFormList，如下：

这里需要完成两层的线路指示图：如下：

所以要将线路图画出来，线路这层需要重写样式。

问题
这个表单项是嵌套了两层ProFormList，也有同样的ProformGroup结构，ProformGroup在嵌套ProFormFields时是会自动套三层antd（.ant-proform-group、.ant-space、.ant-space-item）自己的样式，且这个样式没法通过对ProFormGroup标签代码去自定义classname，如下：

而我们这个项目是使用scss model的方法去将元素样式嵌入（即:global覆写antd样式），一开始我是这么写的：

.diyForm {
  margin-bottom: 8px!important;

  :global {
    .ant-pro-form-group > .ant-space {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0px 0px!important;

      .ant-space-item:nth-child(2) {
        align-self: stretch;
        width: 20px;
      }
    }
  }
}

这样的结果是会影响到两层，如下：

解决

.diyForm {
  margin-bottom: 8px!important;

  :global {
    .ant-row + .ant-pro-form-group > .ant-space {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      // gap: 0px 0px!important;

      // & > .ant-space-item:nth-child(2) {
      //   align-self: stretch;
      //   width: 20px;
      // }
    }
  }
}

兄弟元素还是挺有用的，显示如下：