What is the best practice to change styling of OOTB components in SXA?
Are we allowed to change main.css and also any component-{componentname}.css in our custom theme?
Is this compatible with upgrade? Are there any downsides?
We have tried to create our own custom.css file but we need to use !important; notation almost on every class to make it working and override existing styles.
We are using SXA 1.7.1.
When you export your theme, there are sass files. component-*.scss - you should use those to customize your styles. Don't directly change the *.css files.
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.
