PnP Controlsを利用して、プロパティペインを作成する方法です。
@pnp/spfx-property-controls をインストール
Webパーツのソリューションを開き、以下のコマンドを実行します。
npm install @pnp/spfx-property-controls --save --save-exact
@pnp/spfx-property-controls がインストールされます。
@pnp/spfx-property-controls を利用する
Webパーツクラスのファイルを開き、モジュールをインポートします。
getPropertyPaneConfiguration() メソッドに、表示するコントロールを入力します。
gulp serve で実行してみると、カラーパレットが表示されていることが確認できます。
以上、PnP Controls を利用する方法でした。
カラーパレットの他にも、さまざまなコントロールが用意されています。
詳細は、下記を参照ください。