React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

最新推荐文章于 2024-01-19 11:59:13 发布

转载最新推荐文章于 2024-01-19 11:59:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhourongcode/p/10080887.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过添加ID选择器来修改预设组件样式的方法，特别适用于调整Input和Checkbox等元素的外观，以满足项目需求。文章提供了具体的代码示例，展示了如何更改颜色和背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改样式更符合项目的需求特别是在 Input 和 Checkbox 等等一系列

试过很的方式都有问题， 比如直接在行内添加样式会无法传递到特定的层级

最好的办法是添加 id 可行

渲染部分代码

                <Card title = "修改默认样式">
                    <Form layout = "inline">
                        <FromItem>
                            <Input id = "test" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" /> // 添加 id 为 test 
                        </FromItem>
                        <FromItem>
                            <Input id = "tochang" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" /> // 添加 id 为 tochange
                        </FromItem>
                        <FromItem>
                            <Button type = "primary">登录</Button>
                        </FromItem>
                    </Form>
                </Card>

less 部分代码：

#test {
    color: #f00;
    background-color: #00f;
}

#tochang {
    color: #0f0;
    background-color: pink;
}

效果如下：

效果图

转载于:https://www.cnblogs.com/zhourongcode/p/10080887.html