利用styled-component修改Ant Design 樣式

若是你搜索了這個問題，確定也遇到了和我同樣的困惑，又想用Ant Design的組件，有些樣式本身又想使用styled-component修改，標籤名衝突怎麼辦？ 直接上代碼把....

import React from 'react';
import { Input, Button, List } from 'antd'; 
import { btnStyle, inputStyle, listStyle } from './style'

const TodoListUI = (props) => {
    return (
        <div style={{ margin: '20px' }}>
            <Input style={inputStyle}value={props.inputValue} onChange={props.handleInputChange} />
            <Button style={btnStyle}type="danger" onClick={props.handleBtnClick}>提交</Button>
            <List style={listStyle}bordered dataSource={props.list}
                renderItem={
                    (item, index) => <List.Item onClick={() => { props.handleItemDelete(index) }}>{item}</List.Item>}
            />
        </div>
    )
}
export default TodoListUI;

style.js （就是寫css代碼的文件）

import  styled  from 'styled-components';

export const btnStyle = {
　　background:'pink'
}
export const inputStyle={
    width:'300px',
    margin:'20px',
}
export const listStyle={
    width:'300px',
    margin:'20px',
}

如今大概知道怎麼用了吧。在style.js文件裏直接定義好你須要自定義的css代碼，在UI組件裏直接引入便可修改antd的原有樣式。