在插件管理开发中使用Wordpress Gutenberg组件

Question

我想使用Wordpress Gutenberg组件来开发插件管理端，但是我有一些样式问题，所以请让我知道是否可以使用这些组件来开发插件的管理端？以及如何解决这些样式问题？

组件代码：

import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import {
    Panel,
    PanelBody,
    PanelRow,
    TextControl,
    TextareaControl,
    ColorPalette
} from '@wordpress/components';

export default class Account extends Component {
    constructor() {
        super( ...arguments );

        this.state = {
            name: '',
            number: '',
            default_text: '',
            button_label: '',
            button_color: '',
            button_text_color: ''
        };
    }

    render() {
        const colors = [
            { name: 'red', color: '#f00' },
            { name: 'white', color: '#fff' },
            { name: 'blue', color: '#00f' },
        ];

        return (
            <div>
                {/* <Panel header={ __( 'Account', 'easy-wordpress-whatsapp' ) }> */}
                    <PanelBody initialOpen={ true } title={ __( 'Account', 'easy-wordpress-whatsapp' ) }>
                        <PanelRow>
                            <TextControl
                                label={ __( 'Name', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { name: value } ) }
                                required
                                value={ this.state.name }
                            />
                        </PanelRow>

                        <PanelRow>
                            <TextControl
                                label={ __( 'Number or Group Chat URL', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { number: value } ) }
                                required
                                value={ this.state.number }
                            />
                        </PanelRow>

                        <PanelRow>
                            <TextareaControl
                                label={ __( 'Default Text', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { default_text: value } ) }
                                value={ this.state.default_text }
                            />
                        </PanelRow>
                    </PanelBody>
                {/* </Panel> */}

                {/* <Panel header={ __( 'Button', 'easy-wordpress-whatsapp' ) }> */}
                    <PanelBody initialOpen={ true } title={ __( 'Button', 'easy-wordpress-whatsapp' ) }>
                        <PanelRow>
                            <TextControl
                                label={ __( 'Label', 'easy-wordpress-whatsapp' ) }
                                onChange={ value => this.setState( { button_label: value } ) }
                                required
                                value={ this.state.button_label }
                            />
                        </PanelRow>

                        <PanelRow>
                            <ColorPalette
                                colors={ colors }
                                value={ this.state.button_color }
                                onChange={ ( color ) => this.setState( { color } ) }
                            />
                        </PanelRow>

                        <PanelRow>
                            <ColorPalette
                                colors={ colors }
                                value={ this.state.button_text_color }
                                onChange={ ( color ) => this.setState( { color } ) }
                            />
                        </PanelRow>
                    </PanelBody>
                {/* </Panel> */}

            </div>
        )
    }
}

另外，我应该说我已经加入了“ wp-components”样式和javascript。

$this->enqueue_style( 'wp-components' );
$this->enqueue_script(
'whatsapp',
 $this->get_asset_url( 'dist/admin/index.js' ),
 array(
  'wp-components',
  'wp-data',
  'wp-element',
  'wp-hooks',
  'wp-i18n',
 )
);