Search code examples
reactjsfluent-uifluentui-react

How to give styles to Fluent UI Components?

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.

Solution

  • 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: