<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
Last modified 1mo ago
Copy link
Edit on GitHub