Files
react-test/docs/data/joy/customization/theme-typography/NewTypographyLevel.js
how2ice 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
init project
2025-12-12 14:26:25 +09:00

29 lines
847 B
JavaScript

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import Typography from '@mui/joy/Typography';
const customTheme = extendTheme({
typography: {
kbd: {
background:
'linear-gradient(to top, var(--joy-palette-background-level2), var(--joy-palette-background-surface))',
border: '1px solid var(--joy-palette-neutral-outlinedBorder)',
borderRadius: 'var(--joy-radius-xs)',
boxShadow: 'var(--joy-shadow-sm)',
padding: '0.125em 0.375em',
},
},
});
export default function NewTypographyLevel() {
return (
<CssVarsProvider theme={customTheme}>
<div>
<Typography>
Press <Typography level="kbd"></Typography> +{' '}
<Typography level="kbd">k</Typography> to search the documentation.
</Typography>
</div>
</CssVarsProvider>
);
}