<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 (
<>
<GlobalStyles
styles={{
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:
<GlobalStyles
styles={`
@import url(${typography.fontFace.import});
`}
/>
Last updated
Was this helpful?