Object Styles

Authoring CSS in JavaScript object literal syntax can be a great way to catch syntax errors before committing code and use other features of JS syntax in styles. If you're not used to writing styles in object literal syntax though, there are a few key differences to using native CSS syntax.

Camel case

All CSS properties should be written in camel case instead of using the hyphenated form. For example, the CSS background-color property should be written as backgroundColor.

Values

Strings in JS must be surrounded by either a single quote, double quote or backticks (', ", `).

{
  backgroundColor: 'tomato',
}

Numbers

Numbers should be written without quotes to use the native JS number type. Numbers will generally be converted to pixel values by Emotion.

{
  fontSize: 32,
}

This also means that you can use JS math expressions to derive values.

{
  width: (100 / 3) + '%',
}

To use other CSS units, use strings as values instead.

{
  fontSize: '2em',
}

Commas

All properties should be separated by commas, not semicolons.

{
  fontSize: 32,
  backgroundColor: 'tomato',
}

Pseudo elements

To use the content property in a pseudo-element with ::before or ::after, be sure to wrap the string value with quotes in order for it to be parsed correctly as CSS.

{
  "::before": {
    content: '""',
    display: 'block',
    width: 32,
    height: 32,
    backgroundColor: 'tomato',
  }
}

Vendor prefixes

To use CSS properties with vendor prefixes, omit the dashes and capitalize the first letter of the prefix.

{
  WebkitTextStroke: 'white',
  WebkitTextStrokeWidth: '3px',
  WebkitTextFillColor: 'transparent'
}

For more on using objects in JS, see MDN's guide on Working with Objects.