global font not working
Unanswered
Marble gall posted this in #help-forum
Marble gallOP
first time nextjs user.
im trying to get my fonts working globally.
what ive done:
made a theme.ts file, set the dark + light theme with typography attached as a variable to each of them.
then ive imported light + dark theme to layout.tsx
code for layout.tsx is below (1st set of code)
then inside of header.tsx i have tried to use the theme that i made using the material UI useTheme method.
not sure why the new typography variables arent working
would appreciate any help!
1st set of code
"use client"
import './globals.scss'
import React, {useState} from 'react';
import { lightTheme, darkTheme } from './theme/theme';
import { ThemeProvider, CssBaseline } from '@mui/material';
import {LocalizationProvider} from '@mui/x-date-pickers';
import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs'
import Header from './components/Header';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const [isDark, setIsDark] = useState(false);
const switchTheme: any = () => {
setIsDark(!isDark);
}
return (
<html lang="en">
<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<CssBaseline />
<body>
<Header
switchTheme={switchTheme}
/>
{children}
</body>
</LocalizationProvider>
</ThemeProvider>
</html>
)
}
im trying to get my fonts working globally.
what ive done:
made a theme.ts file, set the dark + light theme with typography attached as a variable to each of them.
then ive imported light + dark theme to layout.tsx
code for layout.tsx is below (1st set of code)
then inside of header.tsx i have tried to use the theme that i made using the material UI useTheme method.
not sure why the new typography variables arent working
would appreciate any help!
1st set of code
"use client"
import './globals.scss'
import React, {useState} from 'react';
import { lightTheme, darkTheme } from './theme/theme';
import { ThemeProvider, CssBaseline } from '@mui/material';
import {LocalizationProvider} from '@mui/x-date-pickers';
import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs'
import Header from './components/Header';
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const [isDark, setIsDark] = useState(false);
const switchTheme: any = () => {
setIsDark(!isDark);
}
return (
<html lang="en">
<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<CssBaseline />
<body>
<Header
switchTheme={switchTheme}
/>
{children}
</body>
</LocalizationProvider>
</ThemeProvider>
</html>
)
}