Margin props on Heading are broken

[sapegin]

Margin props stopped to work on Heading component after styled-system 5 upgrade. Related (but closed) ticket: styled-system/styled-system#599

[okonet]

Hmm, looks like we have to drop defaultProps?

[sapegin]

I'm not sure what's the right solution here: default styles also override props and we need a way to reset default margins or h1-h6.

[okonet]

True... why did it work in v4?

[sapegin]

No idea ;-/

Maybe defining defaults for mt/mr/mb/ml separately will solve it at least for the most common case?

[angeloashmore]

It worked before because styles were computed in the same order as the styled-system config, not prop order.

The only solution I could think of was creating a HOF that automatically applies default props:

import { typography } from 'styled-system'

const withDefaultProps = Comp => props => <Comp {...Comp.defaultProps} {...props} />

const Input = withDefaultProps(styled.input(typography))

Input.defaultProps = {
  px: 0
}

This should work because it ensures the default props are applied before props.

This is untested but the idea sounds like it could work.

[sapegin]

Yeah, this works, no need for such complexity though ;-)

const HeadingBase = styled.h1`
  ${space};
   /* Other styles */
`;

// Apply default props manually, because styled-system will apply them after
// passed props, so default m prop will overwrite passed mb prop for example
const Heading = props => <HeadingBase {...Heading.defaultProps} {...props} />;

Heading.defaultProps = {
  m: 0,
  size: 'xl',
};