利用styled-component修改Ant Design 样式

Posted 2022-06-23 jack-zhou21235

如果你搜索了这个问题，肯定也遇到了和我一样的困惑，又想用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=inputStylevalue=props.inputValue onChange=props.handleInputChange />
            <Button style=btnStyletype="danger" onClick=props.handleBtnClick>提交</Button>
            <List style=listStylebordered 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的原有样式。