Rebass: Not being able to override styles

[vigzmv]

For a component <Image height={100} />
I expect the height to be 100px.

But due to this https://github.com/rebassjs/rebass/blob/34a20ab015a37c50ef8a51f4c9b437ce7aa23338/packages/rebass/src/index.js#L69

My custom style is overridden by the default

[louis-smit]

You can set the height to 100px through the sx prop:

<Image src="/example.png" sx={{height: 100}} />

Remember the jsx pragma and import:

/** @jsx jsx */
import { jsx } from 'theme-ui'

I realise this doesn't exactly resolve your issue but maybe it helps.

Cheers

[vigzmv]

Thanks, I use an older version without the sx prop. I am able to override my styles by extending the component.

But I really think that the default styles should come before passes style props so they can be overridden easily. Unless there's a reason for it to be like this

https://github.com/rebassjs/rebass/blob/34a20ab015a37c50ef8a51f4c9b437ce7aa23338/packages/rebass/src/index.js#L66-L70

[jxnblk]

For a component I expect the height to be 100px.

This should work. Can you create a reproduction of the issue you're seeing?

[jxnblk]

@louissm-it FWIW, you don't need the Theme UI jsx to use the sx prop on Rebass components

[vigzmv]

Thanks for checking in jxnblk.

I found out the issue is from [email protected]
I changed my version to 3.1.1 to solve this problem.

See example. https://codesandbox.io/s/awesome-turing-eqqzg

Also Verified correct behaviour on the latest version. This issue can be closed.

[louis-smit]

@louissm-it FWIW, you don't need the Theme UI jsx to use the sx prop on Rebass components

Thank you. I thought it was needed because when removing the import I get:

'jsx' must be in scope when using JSX react/react-in-jsx-scope

However, when changing the import from '@rebass/emotion' to 'rebass' everything works as expected.

Thanks again👍

[jxnblk]

@louissm-it If you use a pragma comment, that function will need to be in scope. When using Rebass v4, the sx prop works with or without the Theme UI custom create element function, but it looks like you were maybe using an older version as well

[jxnblk]

@vigzmv thanks! Going to close this out since it's not an issue in the current version