如何为 Fluent UI 组件赋予样式？

Question

我开始将 FluentUI 与 React 结合使用，并且我正在尝试修改 Panel 组件。我有这个代码：

  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>
  );

但是 styles = {panelStyles} 给我以下错误：预期类型来自属性 'styles' ，它在此处声明为类型 'IntrinsicAttributes & IPanelProps & { children?: ReactNode; }'

默认面板在左侧打开，我希望它在打开时位于屏幕中央。

Answer 1

属性 styles of Panel 组件为您提供了一组可用于修改样式的属性。

这是如何更改 面板组件 的 backgroundColor 的示例：

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

面板组件：

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

Codepen example.

有用链接：

Panel Component styles
而这个是最重要的 Component Styling

如何为 Fluent UI 组件赋予样式？

How to give styles to Fluent UI Components?

reactjs

fluent-ui

fluentui-react