Setting default values for prop types

[RickEyre]

Is there a way to define properties on styled jss components like styled-components does?

[lttb]

Hello!

No, we have not supported that :)

Do you think that this thing is really useful? For me, it's a little bit ambiguous, because our styled primitives are just about styles and view, not about logic that we can create via attributes. And I think that it should be more clear to do this thing like:

const Input = styled('input')({
  color: 'palevioletred',
  fontSize: '1em',
  border: '2px solid palevioletred',
  borderRadius: '3px',

  margin: props => props.margin,
  padding: props => props.padding,
})

const PasswordInput = props => <Input type="password" {...props} />

You can also define some abstract HOCs and use compose from recompose for better reusability:

const withPasswordType = Comp => props => <Comp type="password" {...props} />
const withPadding = Comp => props =>  <Comp padding={props.size || '1em'} {...props} />
const withMargin = Comp => props =>  <Comp margin={props.size || '1em'} {...props} />

const MyInput = compose(
  withPasswordType,
  withPadding,
)(Input)

const MyAnotherInput = compose(
  withPadding,
  withMargin
)(Input)

const MyThirdInput = compose(
  withPasswordType
  withPadding,
  withMargin,
)

You can check an example here

So I'd prefer to stay with concise API and clear responsibility :) But it's open for discussion of course.

[RickEyre]

Thanks for the answer!

So I'd prefer to stay with concise API and clear responsibility :) But it's open for discussion of course.

Completely understand. This is what I'm doing right now.

If the intention is to keep the clear separation of responsibility I think that's a better decision in the end.

Thanks!