Do not allow arbitrary CSS to be passed into your components

When you allow arbitrary CSS to be passed into your component (e.g. accepting a className or css prop) you expose your internal DOM structure as a public API. Any changes you then make to your components JSX have to be considered breaking changes. Your component is now much harder to evolve.

Instead, limit the customisability where you can. Where necessary, add high-level toggles (e.g. variant="primary"), delegate to a global theme (theme-ui or strict-ui), or build “headless” components that only contain logic.

This also works well when you Use spacer components, as you cannot be passing m={5} into all the components (which is less nice anyway).