how to pass the overlayProps into Panel

Question

How can I pass the styles overlayProps into the Panel component as it is stated in https://developer.microsoft.com/en-us/fluentui#/controls/web/panel

I tried:

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

But does not seems to work

*But does not seems to work*: some elaboration would be helpful. — Brian Thompson, Jun 05 '20 at 14:59

score 3 · Accepted Answer · answered Jun 05 '20 at 19:48

The only thing missing from the original source is root, which is the target element in the overlay.

This snippet (full example) shows a Panel with a red overlay. (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>
  );
};

score 0 · Answer 2 · answered Jun 05 '20 at 15:42

0

layerProps is an optional props to pass to the Layer component hosting the panel.Do you have a Layer Component?

Also, styles can have a className as properties, you may try to give the component a customised name and adapt the css.

answered Jun 05 '20 at 15:42

tcf01

1,699
1
9
24

even the className , how am i going to pass it in order to be used as a prop. overlayProps={{className:"testClassName"}} is not working either – pikk Jun 05 '20 at 15:53

score -1 · Answer 3 · answered Jun 05 '20 at 15:06

i guess you can check out the "Panel - custom navigation" provided in your link.

it has something like below to override searchbox. I think Panel should be the same since it also accepts a similar styles prop.

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

how to pass the overlayProps into Panel

3 Answers3