Javascript 混合搭配antd 5中的水平和垂直形式风格

发布于10月03日

我有一个我想要处于垂直模式的表单. 在它里面，有一排有一堆复选框.我认为复选框在水平方向看起来不太好，所以我想只对该行使用垂直布局.

我过go 在antd 4中通过添加一个覆盖的css类来做到这一点.

下面是垂直表单中的表单项的代码片段:

<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>

我在4中使用的最重要的css如下所示:

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

如果只针对复选框行是水平的，则此css将模仿表单所使用的样式.

现在在antd版本5中，样式发生了很大的变化，我不知道如何实现这一点.

Javascript 混合搭配antd 5中的水平和垂直形式风格

推荐答案

Javascript相关问答推荐

为什么我会获取MUI Date TimePicker TypHelp：Value.isValid不是AdapterDayjs.isValid中的函数

TestCafe预计文本等于以下内容之一

Python类实现的JavaScript吊坠是什么样子的？

Express.js：以块形式发送响应

即使设置了父级的最大高度，固定位置的分区内容也不会滚动？

创建私有JS出口

Express.js：使用Passport.js实现基于角色的身份验证时出现太多重定向问题

当promise 在拒绝处理程序被锁定之前被拒绝时，为什么我们会得到未捕获的错误？

使用axios.获取实时服务器时的404响应

警告！合同执行期间遇到错误[执行已恢复](Base Layer 2)

提交表格后保留Web表格中的收件箱值？

react—router v6：路由没有路径

jQuery s data()[storage object]在vanilla JavaScript中？'

当输入字段无效时，我的应用程序不会返回错误

同一类的所有div'；S的模式窗口

为什么我的按钮没有从&q；1更改为&q；X&q；？

expo 联系人：如果联系人的状态被拒绝，则请求访问联系人的权限

OnClick更改Json数组JSX中的图像源

如何找到带有特定文本和测试ID的div？

react 路由DOM有条件地呈现元素