Ant design react 设置labelAlign无效

Question

用Ant design Form写了一个分步表单，但是使用labelAlign设置label的对齐方式的时候，没有效果。

import React, { useState } from "react";

const Demo: React.FC = () => {
    const { Step } = Steps;
    const [form] = Form.useForm();
    const [currentStep, setCurrentStep] = useState<number>(0);

    const forward = () => setCurrentStep(currentStep + 1);
    const backward = () => setCurrentStep(currentStep - 1);
    const handleNext = async () => {
        if (currentStep === 0) {
            forward();
        };
        if (currentStep === 1) {
            forward();
        }
    }

    const renderContent = () => {
        if (currentStep === 0) {
            return (
                <>
                    <FormItem name="账号">
                        <Input placeholder="请输入账号" />
                    </FormItem>
                </>
            )
        }
        if (currentStep === 1) {
            return (
                <>
                    <FormItem
                        name="passWord"
                        label="姓名"
                    >
                        <Input placeholder="请输入姓名" />
                    </FormItem>
                    <FormItem
                        name="newpassWord"
                        label="学校"
                    >
                        <Input placeholder="请输入学校" />
                    </FormItem>
                    <FormItem
                        name="email"
                        label="邮箱"
                    >
                        <Row>
                            <Col span={16}>
                                <span>{445151515@qq.com}</span>
                            </Col>
                            <Col span={8}>
                                <a>
                                    修改
                                </a>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem
                        name="code"
                        label="家庭住址"
                    >
                         <Input.Password placeholder="请输入家庭住址" />
                    </FormItem>
                </>
            )
        }
        return 
    }

    const renderFooter = () => {
        if (currentStep === 0) {
            return (
                <>
                    <Button
                        type="primary"
                        onClick={() => validateAccount()}
                    >
                        确认
                    </Button>
                </>
            )
        }
        if (currentStep === 1) {
            return (
                <>
                    <Button
                        type="primary"
                        onClick={OnReset}
                    >
                        确认修改
                    </Button>
                </>
            )
        }
        return 
    }

    return (
        <>
            <div className={styles.main}>
                <Steps size="small" current={currentStep}>
                    <Step title="第一步" />
                    <Step title="第二步" />
                    <Step title="第三步" />
                </Steps>
                <div className={styles.formBody}>
                    <Form
                        labelAlign="right"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        form={form}
                    >
                        {renderContent()}
                    </Form>
                </div>
                <div>
                    {renderFooter()}
                </div>
            </div>
        </>
    )
}
export default Forget

期望的效果：表单全部右对齐

实际效果：表单排列错乱，变成两端都对齐。我将labelAlign设置的是right，此时却是左对齐。并且

labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}

的设置完全没有效果
（如下图所示）

Answer 1

其实不是 labelAlign 属性无效，而是需要给 label 设定一个宽度， 审查元素，更换 labelAlign 的值可以发现 css 其实是变化的，只是 label 的宽度给限制了