1. 程式人生 > >React 專案中修改 Ant Design 的預設樣式(Input Checkbox 等等

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;
}
  • 效果如下:
    效果圖