When you export your theme, there are sass files.
component-*.scss - you should use those to customize your styles. Don't directly change the
Once that theme is exported, it does not get overwritten by any upgrades, if the basic theme gets updated in a future upgrade you can always compare that against your custom theme and bring any changes over. The theme is yours to edit as you need to.
As you have found, trying to override the existing files, ends up being painful and just adds a lot of bloat to your styles. So just use the files that the theme has given you and modify those. I have done this in multiple projects now and haven't had any problems upgrading so far.
Its also good practice to follow the theme folder structure. So if you have an optional style, add it to the
sass/styles/<my component> folder, or if you are styling a rendering variant, add it to the
sass/variants/<my component>/<variant-name> folder. Make sure that your main
sass/component-mycomponent.scss file imports those of course. This makes things nice and easy to find when you are fixing issues in the styles of the site.