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.