Emotion: Condition with css not working.

[nontachaiwebdev]

• emotion version: 7.3.2
• react version: 15.5.4

Relevant code.

export const Title1 = styled('h1')`
  letter-spacing: 1px;
  color: #000000;
  font-weight: 300;
  ${props => ( props.margin && `
    margin: ${props.margin};
  `)}
  ${props => ( props.padding && `
    padding: ${props.padding};
  `)}
`

What you did:
I try to set css if have props send to emotion component

What happened:
It not working.

[tkh44]

Try adding css to your style fragments.

export const Title1 = styled('h1')`
  letter-spacing: 1px;
  color: #000000;
  font-weight: 300;
  ${props => ( props.margin && css`
    margin: ${props.margin};
  `)}
  ${props => ( props.padding && css`
    padding: ${props.padding};
  `)}
`

[nontachaiwebdev]

thankyou. It work only first condition.

${props => ( props.margin && css`
    margin: ${props.margin};
  `)}
  ${props => ( props.padding && css`
    padding: ${props.padding};
  `)}

with this code margin will work only.

if swap padding to first of condition. It will work only padding.

How do you think about this ?

[mitchellhamilton]

Adding a semicolon after the margin stuff should fix it.

export const Title1 = styled('h1')`
  letter-spacing: 1px;
  color: #000000;
  font-weight: 300;
  ${props => ( props.margin && css`
    margin: ${props.margin};
  `)};
  ${props => ( props.padding && css`
    padding: ${props.padding};
  `)}
`

[cameron-martin]

I ran into this exact same issue. Is there any way of making the semi-colon not required in these situations, or at least throwing an error rather than silently failing?

[mitchellhamilton]

It will work without a semicolon in emotion 8

[brunolemos]

Based on the comments this should be closed