profile
viewpoint

Ask questionsImprove/add handling of default values

Is your feature request related to a problem? Please describe.

When building UI libraries you want to set good defaults but let consumers override if necessary. Which doesn't really work with the padding/margin currently. So there is no clear way of defining default values that works in all situations.

Eg here https://codesandbox.io/s/pedantic-davinci-r78wx?fontsize=14&hidenavigation=1&theme=dark, as a consumer of the Box component I expect that I'll be able to overwrite the left padding.

Describe the solution you'd like

A better way to provide default values, using defaultProps isn't always enough. Currently I've created a wrapper around system, I wish something similar was available natively. The caveat with this solution is that it doesn't work with compose which is kind of a deal breaker.

export function system(config) {
  const parser = systemCore(config);
  parser.withDefaults = defaults => props => parser({ ...defaults, ...props });

  return parser;
}

Describe alternatives you've considered

N/A

Additional context

N/A

styled-system/styled-system

Answer questions alexandernanberg

I don't remember exactly what changes I made to make it work, but you can probably find out by diffing the gist against https://github.com/styled-system/styled-system/blob/master/packages/core/src/index.js

The use case would looks something like

const styleProps = compose(layout, space).withDefaults({
  display: 'flex',
  p: 4,
});

which would set display: flex and padding: 16px unless you pass props to it

Haven't done any benchmarks, but I suspect that it performs slightly worse than v5 because we add the withDefaults fn to each parser

useful!

Related questions

No questions were found.
source:https://uonfu.com/
Github User Rank List