如何将 overlayProps 传递到 Panel

Question

如何将样式 overlayProps 传递到 Panel 组件中，如 https://developer.microsoft.com/en-us/fluentui#/controls/web/panel

中所述

我试过了：

<Panel
    overlayProps={{styles:{backgroundColor:'red'}}}
/>

但似乎不起作用

Answer 1

我想你可以查看 link 中提供的 "Panel - custom navigation"。

它有类似下面的内容来覆盖搜索框。我认为 Panel 应该是相同的，因为它也接受类似的样式属性。

const searchboxStyles = { root: { margin: '5px', height: 'auto', width: '100%' } };
  <SearchBox
        placeholder="Search here..."
        styles={searchboxStyles}
        ariaLabel="Sample search box. Does not actually search anything."
      />

Answer 2

layerProps 是传递给 Layer component 的可选道具 panel.Do图层组件？

此外，styles 可以有一个 className 作为属性，您可以尝试给组件一个自定义名称并适应 css.

Answer 3

原始源中唯一缺少的是 root，这是叠加层中的目标元素。

此代码段（完整示例）显示了带有红色覆盖层的 Panel。 (full example)

const PanelBasicExample: React.FunctionComponent = () => {
  return (
    <div>
      <Panel
        headerText="Sample panel"
        isOpen={true}
        overlayProps={{ className: "foo", styles: { root: { backgroundColor: "red" }}}}
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );
};

如何将 overlayProps 传递到 Panel

how to pass the overlayProps into Panel

reactjs

office-ui-fabric

office-ui-fabric-react

fluent-ui