在 React 中重用 Tailwind 组件的简单方法

Question

我正在使用顺风 css 做出反应。我想知道如何以简单的方式重用顺风按钮样式，以及将组件文件保存在哪里？

   export default function App() {
      return (
        <div className="App">
            <button
              // className='btn-indigo'
              className="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
            >
              Button1
            </button>

            <button
              // className='btn-indigo'
              className="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
            >
              Button2
            </button>
      }

Answer 1

我正在使用 TypeScript 分享我的一个实现。

您可以了解如何使用顺风重用任何组件。实现、命名和路径通常自以为是。

// src/components/atoms/Button.tsx
import {DefaultComponent} from '$types/common';
import {NoopFn, classNames} from '@utils';
import {ReactElement} from 'react';

type ButtonUse = `primary` | `secondary` | `destructive`;
type ButtonSize = `xs` | `sm` | `md`;
type ButtonType = `button` | `submit`;

type ButtonProps = DefaultComponent & {
  size?: ButtonSize;
  type?: ButtonType;
  use?: ButtonUse;
};

const BUTTON_SIZE: {[key in ButtonSize]: string} = {
  md: `text-base px-4 py-2`,
  sm: `text-sm px-3 py-2 leading-4`,
  xs: `text-xs px-2.5 py-1.5`,
};

const BUTTON_COLOR: {[key in ButtonUse]: string} = {
  destructive: `text-white bg-red-600 hover:bg-red-700`,
  primary: `text-white bg-indigo-600 hover:bg-indigo-700`,
  secondary: ``,
};

export const Button = (props: ButtonProps): ReactElement => {
  const {
    className = ``,
    children,
    use = `primary`,
    size = `xs`,
    type = `button`,
    onClick = NoopFn,
  } = props;
  return (
    <button
      {...{onClick, type}}
      className={classNames(
        `inline-flex items-center border border-transparent font-medium rounded shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 justify-center`,
        BUTTON_SIZE[size],
        BUTTON_COLOR[use],
        className,
      )}>
      {children}
    </button>
  );
};

Answer 2

您可以使用 @apply 指令：

// do this in your CSS file

.my-btn {
  @apply py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75;
}

然后在你的 JSX 代码中：

<button className="my-btn">Foo</button>

您也可以只创建一个简单的组件文件：

// src/components/MyButton.jsx

const MyButton = ({ children }) => <button className="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">{children}</button>

export default MyButton

在您的应用程序文件中：

import MyButton from './components/MyButton'

// ...

<MyButton>foo</MyButton>
<MyButton>bar</MyButton>

如果您还想传递其他道具，则需要修改MyButton。不过，我建议使用 CSS-in-JS 库，例如 styled-components or Emotion instead. There are Tailwind specific alternatives too that may interest you: twin.macro, Twind, xwind.

最简单的方法 - 只需将类存储在一个字符串中。

const myBtn = "py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"

// ...

<button className={`${myBtn} some-other-class-specific-to-foo`}>Foo</button>
<button className={myBtn}>Bar</button>

您还可以使用 classnames and clsx 等库来组成字符串。

在 React 中重用 Tailwind 组件的简单方法

Simple way to reuse tailwind component in react

reactjs

tailwind-css