在React中,怎么用tailwind css(就叫顺丰吧 :D 。。。)封装Button组件
我的目的
想用 tailwind css 来快速封装Button组件,而不是从更大型的UI库导入一个Button组件(那样就太大材小用)。
几个工具
- 从这抄的样式
- 在学习怎么形成规范化的组件 额,仅仅是个参考,我看这个太复杂了,看不懂。
- 这告诉你具体怎么配合顺丰来封装可复用的Button
- tailwind prefixer
开抄
//Button.tsx
import React, { ReactElement, ReactNode } from "react";
import { ButtonType, ButtonSize, buttonSize, buttonType } from "./theme";
interface Props {
children?: ReactNode;
size: buttonSize;
type: buttonType;
}
export default function Button({ children, size, type }: Props): ReactElement {
const classNames = `${ButtonType[type]} ${ButtonSize[size]}`;
return <button className={classNames}>{children}</button>;
}
//theme.ts 东西有点多,因为是用血轮眼复制过来的。。。
export const ButtonType = {
primary:
"tw-inline-block tw-px-6 tw-py-2.5 tw-bg-blue-600 tw-text-white tw-font-medium tw-leading-tight tw-uppercase tw-rounded tw-shadow-md hover:tw-bg-blue-700 hover:tw-shadow-lg focus:tw-bg-blue-700 focus:tw-shadow-lg focus:tw-outline-none focus:tw-ring-0 active:tw-bg-blue-800 active:tw-shadow-lg tw-transition tw-duration-150 tw-ease-in-out ",
secondary:
"tw-inline-block tw-px-6 tw-py-2.5 tw-bg-purple-600 tw-text-white tw-font-medium tw-leading-tight tw-uppercase tw-rounded tw-shadow-md hover:tw-bg-purple-700 hover:tw-shadow-lg focus:tw-bg-purple-700 focus:tw-shadow-lg focus:tw-outline-none focus:tw-ring-0 active:tw-bg-purple-800 active:tw-shadow-lg tw-transition tw-duration-150 tw-ease-in-out",
basic:
"tw-inline-block tw-px-6 tw-py-2.5 tw-bg-green-500 tw-text-white tw-font-medium tw-leading-tight tw-uppercase tw-rounded tw-shadow-md hover:tw-bg-green-600 hover:tw-shadow-lg focus:tw-bg-green-600 focus:tw-shadow-lg focus:tw-outline-none focus:tw-ring-0 active:tw-bg-green-700 active:tw-shadow-lg tw-transition tw-duration-150 tw-ease-in-out",
delete:
"tw-inline-block tw-px-6 tw-py-2.5 tw-bg-red-600 tw-text-white tw-font-medium tw-leading-tight tw-uppercase tw-rounded tw-shadow-md hover:tw-bg-red-700 hover:tw-shadow-lg focus:tw-bg-red-700 focus:tw-shadow-lg focus:tw-outline-none focus:tw-ring-0 active:tw-bg-red-800 active:tw-shadow-lg tw-transition tw-duration-150 tw-ease-in-out",
};
export const ButtonSize = {
sm: "tw-py-2 tw-px-4 tw-text-xs",
lg: "tw-py-3 tw-px-6 tw-text-lg ",
};
export type buttonSize = keyof typeof ButtonSize;
export type buttonType = keyof typeof ButtonType;
就这样,喵。