1

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

我试过了：

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

但似乎不起作用

4

3 回答 3

2

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

此片段（完整示例）显示Panel带有红色叠加层的 a。（完整示例）

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>
  );
};
于 2020-06-05T19:48:47.427 回答
0

layerProps是传递给承载面板的图层组件的可选道具。您有图层组件吗？


此外，styles可以有一个classNameas 属性，你可以尝试给组件一个自定义的名称并适应 css。

于 2020-06-05T15:42:54.303 回答
-1

我想您可以查看链接中提供的“面板 - 自定义导航”。

它有类似下面的内容来覆盖搜索框。我认为 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."
      />
于 2020-06-05T15:06:14.000 回答