Overwrite component

[vincent2090311]

Hi
Im not clear how to overwrite core component. I checked your example and is it mean if I want to overwrite a component (example: login form), I have to find parent component and copy it to my storefront then in the parent component, I will import my child component instead of call core component. (There is no auto fall back method like magento theme ?)
Correct me if I'm wrong.
Thanks

[adamgilmour]

Also having issues with this. I need to modify the input styling (field.css). But because it's a global component that's imported into other components (addressForm.js etc) the components that depend on it also need copying across to the "child" theme or import paths altered in some of the components to point to the "parent" theme, so it severs the chain.

With this in mind you're probably best just copying copying all the components across before you start a theme or just working on veniaUi directly in the first place... or am I completely missing something obvs? ¯_(ツ)_/¯

I wish Magento would bring out some best bloody practises using their PWA setup. Always such limited documentation from those guys!!!

[Jordaneisenburger]

Kinda short on time at the moment but you can take a look at https://github.com/Jordaneisenburger/fallback-studio/blob/master/src/example-company/example-shop/componentOverrideMapping.js

[adamgilmour]

@Jordaneisenburger Sorry, I'm a bit confused.. please can you explain what the componentOverrideMapping.js does or how to utilise it when you have time?

If I need to make a change to a global component such as field.js, I need to copy it over to the theme. There are a few other components that import the component:

Do I need to copy these over to the theme so their import paths point to the correct field.js component?

[Jordaneisenburger]

It basically replaces the left string with right string whenever it's used. So if you wanna overwrite field.js you can replace it with your own in componentOverrideMapping.js