Emotion: composing css fragment with dynamic props

[dfguo]

When composing a css fragment that uses props, the props won't be used.

• emotion version: 7.0.11
• react version: 15.6.1

Relevant code.

const color = css`
  color: ${props => props.color};
`

const padding = css`
  padding: ${props => props.padding}px;
`

const Container = styled.div`
  composes: ${color} ${padding};
`

What you did:

I was hoping that we can dynamically composes and give dynamic css behavior to a component.

What happened:

raw string value of the function appears in the css value

Maybe there is a better way to do it? Let me know.

[mitchellhamilton]

If you want to do this, wrap css in a function that accepts props and interpolate the function.

[dfguo]

const color = (props) => css`
  color: ${props.color};
`

const padding = (props) => css`
  padding: ${props.padding}px;
`

const Container = styled.div`
  composes: ${props => {
    return ${color(props)} ${padding(props)};
  }};
`

works. Thanks @mitchellhamilton

[mitchellhamilton]

Just so you know, you don't need the extra function in the composes interpolation, you can just interpolate color and padding.

[tkh44]

You can do this as well @dfguo.

const color = (props) => css`
  color: ${props.color};
`

const padding = (props) => css`
  padding: ${props.padding}px;
`

const Container = styled.div`
  ${color};
  ${padding};
`

[mitchellhamilton]

const color = (props) => css`
  color: ${props.color};
`

const padding = (props) => css`
  padding: ${props.padding}px;
`

const Container = styled.div`
  composes: ${color} ${padding};
`