Theme’s default styles are overriding my plugin’s custom CSS

I first want to start of by saying that I agree with what @Wyck said

It’s generally a bad idea to override a theme’s CSS with your plugin, but adding a custom unique class/id to your widget should do the trick.

You said @Wyck’s recommendation did not work. I probably would think this is the way to go, and the only way as to make sure you don’t interfere with a theme’s styling. You should use a unique id or class and then target that selector. I just think your execution here is wrong, that is why it doesn’t work.

Firstly, you should avoid using !important in your css. Usually this means your priority of a stylesheet is not correctly set

Secondly, priority is you problem here. All your styling is been overridden by the main stylesheet, because of the fact that your styles get loaded first, and not last. I believe you have enqueued your stylesheet with wp_enqueue_style() and then hooked it to wp_enqueue_scripts

function my_plugin_style() {
       wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }

add_action( 'wp_enqueue_scripts', 'my_plugin_style' );

If you take a look at add_action( $hook, $function_to_add, $priority, $accepted_args );, you’ll see that the third parameter ($priority) is where you set the priority at which your hook must me executed. The higher the number, the lower the priority. In your case, you’ll need to set a very low priority to make sure hat your styles get loaded last. So you’ll need to do something like this

add_action( 'wp_enqueue_scripts', 'my_plugin_style', 9999 );