How to give styles to Fluent UI Components?

Question

I'm starting to use FluentUI with React and I'm trying to modify the Panel component. I've got this code:

  const panelStyles = {
      position: "absolute",
      top:0,
      bottom: 0,
      left: 0,
      right: 0,
      margin: "auto"
  }
  return (
    <div>
      <DefaultButton text={searchText} onClick={openPanel} />
      <Panel
        headerText="Sample panel"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        closeButtonAriaLabel="Cerrar"
        styles={panelStyles}
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );

but the styles = {panelStyles} gives me the following error: The expected type comes from property 'styles' which is declared here on type 'IntrinsicAttributes & IPanelProps & { children?: ReactNode; }'

The default panel opens on the left and I would like it to be centered on the screen when it opens.

score 3 · Accepted Answer · answered Dec 09 '20 at 11:09

Property styles of Panel component gives you a set of properties which you can use to modify styles.

This is example how to change backgroundColor of Panel Component:

styles={{
   main: {
     backgroundColor: '#f00',
   },
}}

Panel Component:

<Panel
  styles={{
    main: {
      backgroundColor: '#f00',
    },
  }}
/>

Codepen example.

Useful links:

Definition of Panel Component styles
And this one is the most important Component Styling

How to give styles to Fluent UI Components?

1 Answers1