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

@bernatfortet I ended up forking styled-system and added withDefaults on the parser, I can create a gist of the entire source if you'd like

useful!

Related questions

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