How to properly add my styles overriding current styles

Question

I have a WP website: after reading docs everywhere, I made up a little, personal plugin that lets me display a particular app, made with VueJS, into a single Page.

Now, the theme of this website is a commercial one.

I red I can add my styles using wp_enqueue_style: my idea was to override some of the theme styles, but in the docs I found wp_enqueue_style:

Registers the style if source provided (does NOT overwrite) and enqueues.

So, as I understand, I can't use this method to overwrite the current style (default theme) of the website.

What should I do to properly style my HTML? Consider one thing: the style must be applied only to one page, I don't need it "globally" (it should simply style my app inside my page, that's it).

Answer 1

You will need to build a child theme to prevent your changes being overwritten when the theme is updated. This child theme needs only to consist of a functions.php file and a stylesheet that you don't name style.css to prevent it from being loaded automatically.

In your functions file you load the stylesheet only for this specific page, like this:

add_action ('wp_enqueue_scripts','wpse278950_add_my_style');
function wpse278950_add_styles () {
  if is_single ('slug-of-your-page')
    wp_register_style ('my-style', get_stylesheet_directory_uri() . '/my-style.css');
  }
}

Note: I didn't test the code, it might need debugging.