如何向 npm react 组件添加自定义样式

Question

我正在使用字体选择器 react 和 id 来自定义按钮的样式。也许我需要从 github 下载并在实际组件中自定义它，或者我错过了一些关于如何设置类似样式的简单内容.

https://www.npmjs.com/package/font-picker-react

那是包，你可以看到按钮的样子。我想更改按钮和下拉菜单的高度宽度和颜色样式

Answer 1

如果您查看source，您可以看到正在呈现的类名

(
  <div
    id={`font-picker${this.fontManager.selectorSuffix}`}
    className={expanded ? "expanded" : ""}
  >
    <button
      type="button"
      className="dropdown-button"
      onClick={this.toggleExpanded}
      onKeyPress={this.toggleExpanded}
    >
      <p className="dropdown-font-family">{activeFontFamily}</p>
      <p className={`dropdown-icon ${loadingStatus}`} />
    </button>
    {loadingStatus === "finished" && this.generateFontList(fonts)}
  </div>
);

使用的选择器不是很好，但您可以使用它来添加一些针对font-picker 的css。您可以添加一个包装器来专门针对它

<div className="font-picker">
  <FontPicker />
</div>

// the classnames that are exposed
.font-picker {
  // assuming you can nest selectors in sass/scss
  div.expanded {}
  .dropdown-button {}
  p.dropdown-font-family {}
}