<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.
import { GlobalStyles } from "tss-react";
import { useStyles } from "tss-react/mui";
​
function MyComponent() {
​
    const { theme } = useStyles();
​
    return (
        <>
            <GlobalStyles
                styles={{
                    "body": {
                        "backgroundColor": theme.palette.background.default,
                    },
                    ".foo": {
                        "color": "cyan"
                    },
                }}
            />
            <h1 className="foo">This text will be cyan</h1>
        </>
    );
}
Is there a reason to use this instead of  import GlobalStyles from "@mui/material/GlobalStyles";?  
No 

withStyles

keyframes

Last modified 1mo ago

Copy link

Edit on GitHub