Rebass: [Question] What's the point of prop styles

[Kikobeats]

Hello,

I usually see myself extending the rebass components, adding more styles as props to accept:

import { Box as BoxBase } from 'rebass'
import { display, textAlign, verticalAlign } from 'styled-system'
import styled from 'styled-components'

const Box = styled(BoxBase)`
  ${display};
  ${textAlign};
  ${verticalAlign};
`

Box.defaultProps = {
  blacklist: [
    ...Object.keys(BoxBase.propTypes),
    ...Object.keys(textAlign.propTypes),
    ...Object.keys(verticalAlign.propTypes),
  ]
}

export default Box

Although this is correct, I feel a bit weird about that.

Am I using the library wrong?

Why not expose rebass component making possible accept all styled-system style props by defaul?

[jxnblk]

Why not expose rebass component making possible accept all styled-system style props by defaul?

In a nutshell, it'd probably be horrible for performance, but I don't have real benchmarks on this.

You can use this library however you want, there isn't a right or wrong way; it is meant to be flexible enough that you can make it work for your particular use case. The pattern you have above, where you extend the base Box component to better suite your needs is definitely a way that I intended people to use this library, but hopefully you're doing that sort of thing once, and then using your custom Box component in your app.

The core idea behind style props and this library is that users of the components and the components you create with Rebass shouldn't have to write custom CSS or think about it all that much. That is, it's an attempt at abstracting away some of the things that trip people up when dealing with CSS. It's also a sort of shortcut to smart defaults. If I'm making a Button component, I can extend the Rebass Button component, and not write the CSS required to style an HTML button over and over again.

That said, there are still a lot of situations where changing specific styles in a one-off way are useful. And since this is a React library, the API for handling that is components and props. With the Box component as an example, I might use it to set padding a certain way in my page header, and set it a different way for the footer. The core styles that I typically want to change in this sort of manner are: margin, padding, font sizes, and colors. For most of the other styling that a component may need, I personally prefer to hard-code it into the component rather than exposing it as a prop. I also make an effort to keep components concerns separate by having separate style components for layout, typography, positioning, animation, etc. and use composition and CSS inheritance to achieve what I need to do.