reactjs - 如何为 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>
  );

但是样式 = {panelStyles} 给了我以下错误： 预期的类型来自属性 'styles'，它在类型 'IntrinsicAttributes & IPanelProps & { children?: ReactNode; }'

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

Answer 1

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

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

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

面板组件：

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

代码笔示例。

有用的链接：

• 面板组件样式的定义
• 而这个是最重要的组件样式