How to edit Woocommerce style.dev css file?

I am trying to edit the styles of the Woocommerce checkout page that is coming from style.dev.css. I tried to copy the file to my child theme directory and made the changes in the new child file. However, it seems that the page is still loading the original file and not the theme file The reason I am not doing my edits in the style.css child file is that most selectors have !important and don't want to do heavy overwriting. Does anyone know what I am missing, please?

The documentation of WooCommerce could help you acheive what you are looking for.

WooCommerce - Disable the default stylesheet

Disable all stylesheets

WooCommerce enqueues 3 stylesheets by default. You can disable them all with the following snippet:

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); 

Disable specific stylesheets

If you want to disable specific stylesheets (i.e, if you do not want to include the handheld stylesheet), you can use the following:

add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );
    unset( $enqueue_styles['woocommerce-layout'] );     
    unset( $enqueue_styles['woocommerce-smallscreen'] );
    return $enqueue_styles;
}

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Then enqueue your own stylesheet like so:

function wp_enqueue_woocommerce_style(){
    
    wp_register_style( 'mytheme-woocommerce', get_stylesheet_directory_uri() . '/css/woocommerce.css' );
            
    if ( class_exists( 'woocommerce' ) ) {
        wp_enqueue_style( 'mytheme-woocommerce' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );