How to add custom add_action hook to the custom admin settings page

In this example menu and submenu is created where specific css file is loaded with custom hook

WordPress will read the hook name automatically if we provide the right syntax. When we create add_menu_page() we should assign it to the variable. Next we can add a hook starting with „load-{$variable name}”. Check the example below

<?php

/*
  Plugin Name: My plugin 1 custom hook and styles
  Description: Learn how to add a custom hook and styles
  Version 1.0
  Author: Matineo
  Author URI: https://www.pikademia.pl/how-to-add-custom-add_action-hook-to-the-custom-admin-settings-page/
*/

add_action('admin_menu', 'ourMenu');


  function ourMenu() {
    $mainPageHook = add_menu_page(
      'My plugin Top info', 
      'My Plugin', 
      'manage_options', 
      'myPluginSlug', 
      'myPluginCallBackFunc', 
      'myPluginIcon', 
      100);
    add_action("load-{$mainPageHook}", 'myPluginAssets');
  }

  function myPluginAssets() {
    wp_enqueue_style('myPluginCss', plugin_dir_url(__FILE__) . 'mypluginstyle.css');
  }

  function myPluginCallBackFunc() { ?>
    <div class="wrap">
        <div class="mainDiv">
            <h1>My plugin 1 title</h1>
            <form method="POST">
                <label for="myplugin1"><p>Enter something...</p></label>
                <div class="textArea">
                    <textarea name="myplugin1" id="myplugin1" placeholder="a,b,c,d"></textarea>
                </div>
                <input type="submit" name="submit" id="submit" class="button button-primary" value="Save Changes">
            </form>
        </div>
    </div>
  <?php }

In mypluginstyle.css

.mainDiv h1{
    color: rgb(22, 150, 255);
}

.mainDiv .textArea{
    display: flex;
}
  
.mainDiv .textArea textarea {
    flex: 1;
    height: 200px;
    margin-bottom: 20px;
}