css

The css tagged template literal is a simple but powerful way to add styles in your Firebolt app:

import { css } from 'firebolt'

export function MyComponent() {
  return (
    <div
      css={css`
        color: red;
      `}
    >
      Firebolt
    </div>
  )
}

Local vs Global

Adding styles to an element using the css prop creates local styles that are scoped to the element and its children.

To insert global styles, use a regular <style> element with the global prop like this:

<style
  global={css`
    :root {
      background-color: blue;
    }
  `}
/>

Syntax Highlighting

If you're using VSCode you can install the vscode-styled-components extension to get proper CSS syntax highlighting in your editor.