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

效果如下：