利用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的原有样式。

 

转载于:https://www.cnblogs.com/jack-zhou21235/p/11326364.html