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 {}
}

如何向NPM React组件添加自定义样式

1 个答案: