name: Global route: /global

Global

A tiny, crucial set of global styles to provide a solid and consistent foundation for our components; containing browser resets, @font-face defintions and page-level styling.

Usage

Add the global styles to the root of your application.

/* App.tsx */
import React from 'react';
import { Global } from '@heathmont/moon-global';

export const App = () => (
  <main>
    <Global styles={/* optional custom styles */} />
    {/* Your App… */}
  </main>
);

An additional polyfill is provided for further progressive enhancements such as :focus-visible.

This should be included separately within your root application file/wrapper component, as it only runs in the browser.