![](/img/trans.png)
[英]Change color of Title Component in Ant Design using Styled Component?
[英]How override a Button Ant Design with styled component and typescripts?
我想用 typescript 和样式组件覆盖按钮 Ant 设计以个性化样式。 但是当我尝试结果并不好。
我尝试了一些测试,但从未有过良好的显示效果。
我试着这样但没有结果。
但是结果没有 ant 设计组件的样式,但按钮继承了 Button ant 设计和她的道具。
按钮样式组件
import { Button as AntButton } from "antd";
import { NativeButtonProps } from "antd/lib/button/button";
import * as React from "react";
import styledComponents from "styled-components";
export const Button = styledComponents<NativeButtonProps>(props => (
<AntButton {...props} />
))`
pType: string;
pSize: string;
pShape: string;
`;
按钮
import * as React from "react";
import { Button } from "./ButtonStyleComponent";
export interface ButtonProps {
pType?: "primary" | "secondary" | "danger";
pSize?: "small" | "medium" | "large";
pShape?: "round" | "rect";
}
class Button extends React.Component<ButtonProps> {
render() {
return (
<Button
{...this.props}
pType={this.props.pType}
pSize={this.props.pSize}
pShape={this.props.pShape}
>
{this.props.children}
</Button>
);
}
}
出口{按钮};
问题是当我执行这段代码时,我只看到一个丑陋的灰色按钮,而不是一个带有 Ant 设计按钮设计的按钮。
另一个问题是当我尝试调用 Ant 设计按钮的方法时,该方法无法识别(例如:方法 onClick )。
已设置组件网站的常见问题解答中有答案。
下面我覆盖了 Antd 按钮的默认背景颜色。
import React from "react";
import "antd/dist/antd.css";
import { Button } from "antd";
import styled from "styled-components";
const MyButton = styled(Button)`
&&& {
background: red;
}
`;
export default function App() {
return (
<div className="App">
<MyButton>Click</MyButton>
</div>
);
}
这是我使用antd
所做的非常相似的示例
import { Button } from 'antd'
import { ButtonProps } from 'antd/lib/button'
import useStyles from 'isomorphic-style-loader-forked/useStyles'
import React from 'react'
import s from './CardButton.css'
interface CardButtonProps extends ButtonProps {
onClick?: () => void
}
const CardButton = ({ children, onClick, ...rest }: CardButtonProps) => {
useStyles(s)
return (
<Button ghost type="primary" className={s.root} onClick={onClick} {...rest}>
{children}
</Button>
)
}
export default CardButton
但是,对于您的问题,也许这个答案有助于更多如何用样式化组件和 TypeScript 结束 Ant 设计?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.