javascript - 重用具有不同样式的 React 组件

Question

为了尽可能保持 React 代码的可重用性，我经常将 CSS 类作为 React 组件中的属性传递。这样做的用例是这些组件的功能完全相同，但根据它们在页面中的位置，它们看起来可能会有所不同。

在 React 组件中将 CSS 类作为属性传递是否可以接受，或者是否有更好的方法来完成上述用例？

快速、简化的示例:

const ToolTipButton = ({ buttonClass, onButtonClick, children }) => (
  <button
    className={buttonClass}
    onClick={onButtonClick}
    data-toggle="pages-tooltip"
    data-placement="top"
    title="Do Something"
  >
    {children}
  </button>
);

<ToolTipButton buttonClass={'ButtonClass1'} onButtonClick={this.doesSomething}/>
<ToolTipButton buttonClass={'ButtonClass2'} onButtonClick={this.doesSomething}>
  // Text and other stuff
</ToolTipButton>

Answer 1

Css 选择器是可链接的，因此仅使用纯 css，您就可以拥有基于容器的个性化样式。按钮组件可以有一个静态类，例如 tool-tip-button，并让样式表将其范围限定到包含组件。例如

.tool-tip-button {
  color: black;
}

.component-a .tool-tip-button {
   color: green;
}

.component-b .tool-tip-button {
   color: red;
}

请注意，React 组件可以(并建议)拥有自己的样式表，例如ComponentA.css 和 ComponentB.css，并简单地导入它们:

// ComponentA.js
import './ComponentA.css'