修改antd表单Form.Item的label颜色的方法

心已赠人 2024-01-30 06:33 17阅读 0赞

默认的Form.item的标签颜色为黑色，但是如果我是用深色背景，这样的情况下表单就看不清楚label了，就像下面的情况，密码两个字完全看不到，所以想把它改为白色字体，就像上面的账号两个字一样：

![6cf768297f214ddc853ad0b3abd0ee4e.png][]

所以怎么修改呢？

![3d41cb4d910f4a2d8fe1ec988f72b0dd.png][]

只需要添加一个label使用jsx的方式：

<Form.Item
                                label={
                                    <label style={
       { color: 'white' }}>密码</label>
                                }
                                name="password"
                                rules={[
                                    { required: true, message: '请输入密码' },
                                    { max: 18, message: '最大长度18个字符' },
                                ]}
                            >
                                <Input
                                    prefix={
                                        <KeyOutlined style={
       { fontSize: 13 }} />
                                    }
                                    size="large"
                                    type="password"
                                    placeholder="123456/123456"
                                    onPressEnter={onSubmit}
                                />
                            </Form.Item>

[6cf768297f214ddc853ad0b3abd0ee4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a14b4eb6a1fc48aa881802abc799bc27.png
[3d41cb4d910f4a2d8fe1ec988f72b0dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/5bf8dd38d2c5404eaa28515845d94665.png