在反應中重用順風組件的簡單方法

我是一個在反應中使用順風 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>
      }

uj5u.com熱心網友回復：

我正在使用 TypeScript 分享我的一個實作。

您可以了解如何使用 Tailwind 重用任何組件。實作、命名和路徑通常是自以為是。

// 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>
  );
};

uj5u.com熱心網友回復：

您可以使用該@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或Emotion。您可能會對 Tailwind 特定的替代方案感興趣：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>

您還可以使用類名和clsx等庫來組合字串。

標籤：反应 顺风-css

上一篇：TypeError：Object.entries要求輸入引數在ReactNative中不能為null或未定義

下一篇：MUI輸入不允許oninput屬性