时间戳

首页 > 解决方案 > 如何向 npm react 组件添加自定义样式

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

问题描述

我正在使用字体选择器 react 和 id 来自定义按钮的样式。也许我需要从 github 下载并在实际组件中对其进行自定义，或者我可能缺少一些关于如何设置这样的样式的简单内容。

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

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

标签： reactjs

解决方案

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

(
  <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. 您可以添加一个包装器来专门针对它

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

推荐阅读