标签：自定义 cli red 标签 onclick delete 使用 turn margin
如果你搜索了这个问题，肯定也遇到了和我一样的困惑，又想用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的原有样式。
利用styled-component修改Ant Design 样式
标签：自定义 cli red 标签 onclick delete 使用 turn margin
原文地址：https://www.cnblogs.com/jack-zhou21235/p/11326364.html
