How to use the theme-ui.css function in theme-ui

/** @jsx jsx */
import { jsx, Global } from '@emotion/core'
import { css } from 'theme-ui'
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button'

// css prop doesn't work with reach ui
// styles must be global due to how portals are used
const styles = css({
  ':root': {
    '--reach-menu-button': 1
  },
  '[data-reach-menu]': {
    display: 'block',
    position: 'absolute'
  },
  '[data-reach-menu-list]': {
    display: 'block',
    position: 'relative',
    whiteSpace: 'nowrap',
    border: '1px solid lightgray',
    backgroundColor: 'white',
    outline: 'none',
    zIndex: 101
  },

function Layout({ children, location }) {
  const [sidebar, sidebarOpen, setSidebarOpen, sidebarToggler] = useSidebar()

  const { theme } = useThemeUI()

  return (
    
      

      

      
        Skip to main content

import React from 'react'
import styled from '@emotion/styled'
import { css } from 'theme-ui'

const Pre = styled.pre(
  css({
    bg: 'lightgray',
    p: 3,
    fontFamily: 'monospace'
  })
)

export default ({ children, ...props }) =&gt; <pre>{children}</pre>

function SwatchToken({ color = "text", css: componentCSS, ...rest }) {
	return (
		<h3>
	);
}
</h3>

function SwatchValue({ color = "secondary", css: componentCSS, ...rest }) {
	return (
		<p>
	);
}
</p>