如何使 React 組件在樣式方面可重用？

Question

考慮以下帶有自己的 scss 文件的輸入組件：

import React from "react";
import "./InputBox.scss";

const InputBox = () => {
  return (
    <div>
      <label for="fname">First name: </label>
      <input className="input-box" type="text" id="fname" name="fname" />
    </div>
  );
};

export default InputBox;

.input-box {
  background-color: blue;
}

import React from "react";
import InputBox from "./InputBox";
export default function App() {
  return (
    <div className="App">
      <div>The blue input box</div>
      <InputBox />
      <div>The green input box</div>
      <InputBox />
    </div>
  );
}

這里的工作示例

功能沒問題，我的問題是樣式：假設我想要一個綠色輸入框，外部 SCSS 文件似乎不可能。 我可以將 className 作為道具傳遞，但我覺得這是一種矯枉過正。 我覺得我的組件不應該包含任何樣式，並且只在使用它時應用樣式。 如何為同一組件設置不同的樣式？

Answer 1

根據項目的不同，我通常會傳遞一個 variant prop 來確定元素的樣式，例如，您有一個輸入字段的默認樣式，但您確實有如此不同的輸入變體，它們具有自己獨特的樣式。 所以你所能做的就是傳遞一個變體，它會為你的 class 名稱添加一個修飾符塊。

默認類名 = 'input' 取決於變體，整個 class 名稱應該類似於 'input input--variant-name'

所有默認樣式 go 到“輸入” class 名稱，而變體進行更改。 我覺得這不是矯枉過正，因為它以這種方式更有條理，並且結合使用 scss 和 css 變量，您可以為您的樣式創建一個非常有條理的項目結構。

Answer 2

您可以使用 useRef 掛鈎來完成，這是現場演示鏈接： https://codesandbox.io/s/romantic-ride-j0hdp?file=/src/App.js這樣您就不需要任何 css 文件。

Answer 3

我試圖將className作為道具傳遞並且它起作用了，代碼在這里：

const InputBox = ({ color }) => {
  return (
    <div>
      <label for="fname">First name: </label>
      <input
        className={"input-box-" + color}
        type="text"
        id="fname"
        name="fname"
      />
    </div>
  );
};

.input-box {
  &-blue {
    background-color: blue;
  }
  &-green {
    background-color: green;
  }
}

export default function App() {
  return (
    <div className="App">
      <div>The blue input box</div>
      <InputBox color={"blue"} />
      <div>The green input box</div>
      <InputBox color={"green"} />
    </div>
  );
}

我已經可以看到一些問題：

在設計組件時，是否應該考慮所有可能的樣式變化並將其設計為道具？ 如果是，那么每次使用該組件都需要寫所有的props，很麻煩。 如果不是，添加道具需要修改組件。