0

我似乎无法className通过. 我认为这应该是可能的，因为为枢轴按钮添加了 7.114.0 版本。我是否遗漏了一些明显的东西？我的 data 属性渲染得很好，以及标签内容周围的容器元素的类名和 id。idheaderButtonPropsPivotItemIButtonProps

<PivotItem
  headerText={tab.label}
  itemKey={tab.id}
  key={tab.id}
  headerButtonProps={{
    'data-test': 'test',
    className: 'tab-button',
    id: 'tab-id'
  }}
  itemCount={tab.count}
  className={tab.className}
  id={tab.idName}
 >
  {tab.content}
</PivotItem>
4

1 回答 1

0

Pivot如果您在或组件上的 vs-code 中按 F12 PivotItem，则会将您带到 node_modules 中的源代码。导航到附近的Pivot.base.js文件 - 我认为第 48 行显示了发生这种情况的原因：

return (React.createElement(CommandButton, tslib_1.__assign({}, headerButtonProps, { id: tabId, key: itemKey, className: isSelected ? _this._classNames.linkIsSelected : _this._classNames.link, onClick: _this._onLinkClick.bind(_this, itemKey), onKeyPress: _this._onKeyPress.bind(_this, itemKey), ariaLabel: link.ariaLabel, role: "tab", "aria-selected": isSelected, name: link.headerText, keytipProps: link.keytipProps, "data-content": contentString }), linkContent));

这是 - 的默认实现，您可以从链接参数renderPivotLink中看到它。headerButtonProps我假设链接参数是从类型的孩子派生的PivotItem。

第 48 行的tslib_1.__assign()方法有效地将headerButtonProps您传入的对象与第三个参数中的对象合并，并且第三个参数同时设置id和className- 因此这些值会覆盖您的值。

如果这两个参数互换，您的 className 或 ID 等将替换在 Pivot 源代码中设置的那些 - 他们显然不希望人们这样做，所以这是正确的顺序。他们本可以选择将 className 设置为将您的 classNames 与源代码中的 classNames 合并的对象——这就是他们在其他一些组件中所做的事情——但他们在这里没有这样做。

如果您想建议他们这样做 - 对于 repo 上的问题或拉取请求可能是一个好主意： https ://github.com/microsoft/fluentui/tree/master/packages/react

我意识到我迟到了 2 个月才回复您 - 但是，如果您希望基于 ID 或类在 CSS 或 JS/TS 中执行某些操作 - 您仍然可以使用您的数据属性作为选择器来执行此操作。

对于样式表 - 给父 Pivot 本身一个类名 - 示例（SCSS）：

.parentPivot {
   button[data-your-attribute="someValue"] {
      /* your styling here */
   }
}

在代码（TS）中：

   const yourElement = document.querySelector(`.${pivotClassName} button[data-your-attribute="someValue"]`);
   if (yourElement) {
      // do stuff
   }

希望对未来有所帮助！

汤姆

于 2021-03-31T23:57:54.413 回答