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

    效果如下:

    效果图

  • 相关阅读:
    StackView
    横竖屏
    Html
    UILabel
    NSString
    NSPredicate|谓词
    iphone
    函数
    UIBezierPath
    UICollectionView
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/10080887.html
Copyright © 2011-2022 走看看