2

私は React で FluentUI を使い始めており、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} を指定すると、次のエラーが表示されます。期待される型は、type 'IntrinsicAttributes & IPanelProps & { children?: ReactNode; でここで宣言されているプロパティ 'styles' から取得されます。}'

デフォルトのパネルは左側に開きます。開いたときに画面の中央に配置したいと思います。

4

1 に答える 1

3

コンポーネントのプロパティstylesはPanel、スタイルの変更に使用できる一連のプロパティを提供します。

backgroundColorこれは、パネル コンポーネントの変更方法の例です。

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

パネル コンポーネント:

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

コードペンの例。

便利なリンク:

于 2020-12-09T11:09:52.207 に答える