TSS
HomeGitHubPlayground
v3
v3
  • ๐Ÿš€Why TSS
  • ๐Ÿ”งSetup
  • ๐Ÿ”API References
    • makeStyles -> useStyles
    • withStyles
    • <GlobalStyles />
    • keyframes
    • useMergedClasses
  • ๐Ÿ’ฝCache
  • ๐Ÿ’ซNested selectors (ex $ syntax)
  • โšกSSR
    • Gatsby
    • Next.js
    • Other backends
  • ๐ŸฆฑYour own classes prop
  • ๐ŸญMUI Theme styleOverrides
  • ๐ŸงนDetecting unused classes
  • ๐Ÿ“ฆPublish a module that uses TSS
  • ๐Ÿ”ฉsingle-spa
  • ๐Ÿ“ฒReact Native
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. API References

<GlobalStyles />

PreviouswithStylesNextkeyframes

Last updated 2 years ago

Was this helpful?

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 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
css()