zoukankan      html  css  js  c++  java
  • React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

    修改样式更符合项目的需求特别是在 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;
    }
    

    效果如下:

    效果图

  • 相关阅读:
    inetinfo
    常用的IIS命令
    asp.net
    WAS与w3svc
    服务和进程的关系
    w3svc
    link
    RAC动态资源(DRM)管理介绍
    RMAN内部原理介绍
    在32位的linux平台上为Oracle配置>1.7GB的SGA
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/10080887.html
Copyright © 2011-2022 走看看