Branding LWR store components with styling hooks versus custom CSS classes
Key Takeaway
Brand LWR store components with --dxp styling hooks read through var(), and keep custom CSS as a sparing fallback that targets parts.
Lightning web components hide their inner elements from the page, so you can't brand them with your own page-level CSS classes the way you would in an Aura store. In a store on LWR, you brand them with --dxp styling hooks, which are variables in your CSS tied to the Theme panel in Experience Builder. A Theme panel change then reaches the components that use those hooks. Custom CSS is a careful fallback for the cases hooks can't handle.
Why LWR styling differs from Aura
A B2B store on Aura supports both Aura components and Lightning web components. A B2B store on LWR supports only Lightning web components, and that difference changes how you style the store.
In a B2B store on Aura, you create your own CSS classes for custom styling. A Lightning web component blocks that kind of styling because it follows shadow DOM standards. A component's own CSS file still applies automatically to its own HTML file, so classes defined inside the component do style that component's markup.
When you migrate a store from Aura to LWR, plan to update existing UI components. Many Lightning web components built for Aura work on LWR with no changes or small changes.