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 />;
}
Usage with makeStyles
โ
import { makeStyles, makeStaticStyles, shorthands } from '@griffel/react';
const useStaticStyles = makeStaticStyles({
body: {
color: 'red',
padding: '5px',
},
});
const useClasses = makeStyles({
primaryText: {
color: 'blue',
padding: '10px',
},
});
export default function App(props) {
useStaticStyles();
const classes = useClasses();
return <p className={props.primaryText}>Hello world</p>;
}
CSS Fallback Propertiesโ
Griffel supports CSS fallback properties in order to support older browsers.
Any CSS property accepts an array of values which are all added to the styles. Every browser will use the latest valid value (which might be a different one in different browsers, based on supported CSS in that browser):
import { makeStaticStyles } from '@griffel/react';
const useClasses = makeStaticStyles({
body: {
overflowY: ['scroll', 'overlay'],
},
});
function App() {
useStaticStyles();
return <div />;
}
Produces following CSS...
body {
overflow-y: scroll; /* Fallback for browsers which do not support overflow: overlay */
overflow-y: overlay; /* Used by browsers which support overflow: overlay */
}