styled-components + TypeScript
需要安装 @types
yarn add -D @types/styled-components
详细说明
原生dom使用 styled.div , styled.h1
Button
是 antd 的按钮
IMyButtonProps
是props的ts类型定义,
- attrs需要指定一次, 普通css开头也需要指定一次
attrs
是 设置属性
- 一般用来封装通用的属性, 不通用的就在jsx中直接传入,
可以直接传入对象,也可以传入匿名方法最后返回对象
$myColor / $myBorderColor
是 props
$
开头代表是Transient props
(v5.1新增),
框架会自动过滤掉,不会传递给React组件,不是标准dom的属性名输出到html中会报错
border-radius: 10px;
是设置style,
- props 方法中可以返回 字符串(无智能提示) 或 CSSProperties (有智能提示)
代码
import { Button } from 'antd';
import { NextPage } from 'next';
import { memo } from 'react';
import styled from 'styled-components';
interface IMyButtonProps {
$switchShape: boolean;
$myColor: string;
$myBorderColor: string;
}
let MyButton = styled(Button).attrs<IMyButtonProps>((props) => {
// console.log(props);
let myShape = props.$switchShape ? 'circle' : 'round';
return { type: 'primary', shape: myShape };
})<IMyButtonProps>`
margin-left: 10px;
${{
padding: '100px',
}}
${(props) => {
// 可以获取到 attrs 中的结果
// console.log(props);
// 返回字符串
return `
color:${props.$myColor}
`;
}};
${(props) => {
// 返回 react CSSProperties 对象
return {
borderColor: props.$myBorderColor,
};
}};
`;
interface IProp {}
let index: NextPage<IProp> = function (props) {
return (
<>
<Button style={{ borderRadius: '20px' }} type='primary'>
click 1
</Button>
<MyButton ghost={true} $switchShape $myBorderColor='black' $myColor='red'>
click 2
</MyButton>
</>
);
};
export default memo(index);