makeStaticStyles

Creates styles with a global selector. This is especially useful for CSS resets, for example normalize.css.

makeStaticStyles returns a React hook that should be called inside a component.

Defining styles with objects

import { makeStaticStyles } from '@griffel/react';

const useStaticStyles = makeStaticStyles({
  '@font-face': {
    fontFamily: 'Open Sans',
    src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
         url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
  },
  body: {
    backgroundColor: 'red',
  },
});

function App() {
  useStaticStyles();

  return <div />;
}

Produces following CSS...

@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular-webfont.woff2') format('woff2'), url('/fonts/OpenSans-Regular-webfont.woff') format('woff');
}
body {
  background-color: red;
}

Limited support for nested selectors

Nested selectors are not supported for this scenario via nesting of JavaScript objects.

import { makeStaticStyles } from '@griffel/react';

const useStaticStyles = makeStaticStyles({
  // 🔴 Not supported
  '.some': {
    '.class': {
      /* ... */
    },
    ':hover': {
      /* ... */
    },
  },

  // ✅ Supported
  '.some.class': {
    /* ... */
  },
  '.some.class:hover': {
    /* ... */
  },
});

Defining multiple styles

Static styles can be defined with strings & arrays of strings/objects:

import { makeStaticStyles } from '@griffel/react';

const useStaticStyles1 = makeStaticStyles('body { background: red; } .foo { color: green; }');
const useStaticStyles2 = makeStaticStyles([
  {
    '@font-face': {
      fontFamily: 'My Font',
      src: `url(my_font.woff)`,
    },
  },
  'html { line-height: 20px; }',
]);

function App() {
  useStaticStyles1();
  useStaticStyles2();

  return <div />;
}

note

makeStaticStyles supports the use of shorthands and does not have the same limitation as makeStyles().

Usage with makeStyles

import { makeStyles, makeStaticStyles, shorthands } from '@griffel/react';

const useStaticStyles = makeStaticStyles({
  body: {
    color: 'red',
    padding: '5px',
  },
});

const useClasses = makeStyles({
  primaryText: {
    color: 'blue',
    ...shorthands.padding('5px'),
  },
});

export default function App(props) {
  useStaticStyles();
  const classes = useClasses();

  return <p className={props.primaryText}>Hello world</p>;
}