Confusing example

[bslipek]

In this example:

const Button = styled.button`
  color: ${prop('theme.colors.white', '#fff')};
  font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
  background-color: ${prop('tgeme.colors.black', '#000')};
  
  ${ifProp('disabled', css`
    background-color: ${prop('theme.colors.gray', '#999')};
    pointer-events: none;
  `)}
`

we have ${ifProp('disabled', css but css is neither defined nor needed.

So it should be like that:

const Button = styled.button`
  color: ${prop('theme.colors.white', '#fff')};
  font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
  background-color: ${prop('tgeme.colors.black', '#000')};
  
  ${ifProp('disabled', `
    background-color: ${prop('theme.colors.gray', '#999')};
    pointer-events: none;
  `)}
`

[diegohaz]

Hey, @bslipek.

That's css from styled-components: https://www.styled-components.com/docs/api#css

And that's needed to handle interpolations (prop('theme.colors...). For instance, try to remove css here: https://www.webpackbin.com/bins/-KmWrYsZMKqn0pbntMy3

I would accept a PR adding a import styled, { css } from 'styled-components' though, if you think it might help to avoid the confusion.