<GlobalStyles />

Sometimes you might want to insert global css. You can use the <GlobalStyles /> component to do this.

It's styles (with an s) prop should be of same type as the css() function argument or you can use string interpolation (see below).

import { GlobalStyles } from "tss-react";
import { useStyles } from "tss-react/mui";

function MyComponent() {

    const { theme } = useStyles();

    return (
                    body: {
                        backgroundColor: theme.palette.background.default,
                    ".foo": {
                        color: "cyan"
            <h1 className="foo">This text will be cyan</h1>

Use string interpolation, for example to import font face:

    @import url(${typography.fontFace.import});

Is there a reason to use this instead of import GlobalStyles from "@mui/material/GlobalStyles";? No

Last updated