Using props m, p, mx, my, marginBottom etc. on <Text />, <Heading /> doesn't have any effect

[hinok]

Describe Your Environment

What version of Spectacle are you using? (can be found by running npm list spectacle)

[email protected]

What version of React are you using? (can be found by running npm list react)

[email protected]

What browser are you using?

chrome

What machine are you on?

macOS / macbook pro

Describe the Problem

https://codesandbox.io/s/simple-spectacle-example-ztd4b?file=/src/index.js

Using props m, mx, my, p, px, py doesn't work for <Text /> and <Heading />.

See generated CSS

Expected behavior:

It should change padding and margin.

Actual behavior:

padding and margin doesn't change or rules are overriden.

Additional Information

N/A

[christianipanaque]

Consumers overriding our padding/margin default values is currently not supported by the styled-system library.

These are the opened issues related to this problem:

https://github.com/styled-system/styled-system/issues/1136

https://github.com/styled-system/styled-system/issues/1058

https://github.com/styled-system/styled-system/issues/882