利用styled-component修改Ant Design 样式

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;

import  styled  from ‘styled-components‘;

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