Extend CSS of default Venia component

Question

I'm searching for the best approach to extend the CSS of the default Venia header component without copying the entire default file.

I've already looked up the render chain and created the component directories, copied the components and updated the import statements and now I'm looking for a way to extend the default CSS which is imported and used via the following lines of code:

import defaultClasses from '@magento/venia-ui/lib/components/Header/header.css';

const classes = mergeClasses(defaultClasses, props.classes);

I thought of additionally importing an extra file and merge this together in const classes but this doesn't seem to work.

Answer 1

If you are making subtle changes why not create child theme and then include one final style file with all your overrides?

You are potentially doubling up on styles but I cant think how else you would do it

Answer 2

Yo need to locate a local intercept and add some tags to override the original file with your modified file. If you need more help with this you can check this tutorial: https://developer.adobe.com/commerce/pwa-studio/tutorials/extensions/