005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
26 lines
872 B
JavaScript
26 lines
872 B
JavaScript
import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
|
|
import Box from '@mui/joy/Box';
|
|
|
|
const customTheme = extendTheme({
|
|
typography: {
|
|
h1: {
|
|
// `--joy` is the default CSS variable prefix.
|
|
// If you have a custom prefix, you have to use it instead.
|
|
// For more details about the custom prefix, go to https://mui.com/joy-ui/customization/using-css-variables/#custom-prefix
|
|
background:
|
|
'linear-gradient(-30deg, var(--joy-palette-primary-700), var(--joy-palette-primary-400))',
|
|
// `Webkit*` properties must come later.
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
},
|
|
},
|
|
});
|
|
|
|
export default function CustomTypographyLevel() {
|
|
return (
|
|
<CssVarsProvider theme={customTheme}>
|
|
<Box sx={(theme) => theme.typography.h1}>This is a gradient h1</Box>
|
|
</CssVarsProvider>
|
|
);
|
|
}
|