theme-ui components: Remove style props

components: Remove style props

Open lachlanjc opened this issue 1 year ago • 6 comments

We'd mentioned this in #2275 & #832 as part of simplifying our API, as it can lead to confusing CSS ordering & overrides: if I have the same property in a style prop & sx, which wins out? It's especially unclear from a component that's wrapping a Theme UI component. This is a big, breaking change, so it should definitely not be in our MDX release, in case folks don't want to upgrade immediately. Providing a codemod would be great too; I haven't worked on that yet.

Release notes

BREAKING: Theme UI Components no longer accept style props (e.g. <Box bg="primary" mt={3}), in favor of only supporting styling through the sx prop.
- The Field component now accepts a second containerSx prop, intended to replace whitespace style props (e.g. to convert <Field my={3} sx={{ … }} to <Field containerSx={{ my: 3 }} sx={{ … }}). Checkbox, Select, and Switch have this new prop as well.