Theme does not apply to typography.
Hi, i created a simple refine app with react, remix and material ui using the following command:
I selected the option for a custom theme, this generated a components folder containing Header, Layout, Title and Sider.
I created the following page to show an Imprint:
When switch theme with button at the top, the text color does not change.
What am I missing?
The page is integrated like this into refine:
npm create refine-app@latestnpm create refine-app@latestI selected the option for a custom theme, this generated a components folder containing Header, Layout, Title and Sider.
I created the following page to show an Imprint:
import { Container, Typography } from "@pankod/refine-mui";
import { Header, Layout } from "~/components/layout";
export default function Imprint() {
return (
<Layout>
<Typography variant="h3">Haftungsausschluss</Typography>
</Layout>
);
}import { Container, Typography } from "@pankod/refine-mui";
import { Header, Layout } from "~/components/layout";
export default function Imprint() {
return (
<Layout>
<Typography variant="h3">Haftungsausschluss</Typography>
</Layout>
);
}When switch theme with button at the top, the text color does not change.
What am I missing?
The page is integrated like this into refine:
export default function App() {
return (
<Document>
<ColorModeContextProvider>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
notificationProvider={notificationProvider}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "posts",
list: MuiInferencer,
edit: MuiInferencer,
show: MuiInferencer,
create: MuiInferencer,
canDelete: true,
},
{
name: 'imprint',
options: {
label: 'Imprint',
},
list: () => null,
}
]}
Title={Title}
Sider={Sider}
Layout={Layout}
Header={Header}
authProvider={authProvider}
LoginPage={AuthPage}
>
<Outlet />
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
</Document>
);
}export default function App() {
return (
<Document>
<ColorModeContextProvider>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(API_URL)}
notificationProvider={notificationProvider}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
resources={[
{
name: "posts",
list: MuiInferencer,
edit: MuiInferencer,
show: MuiInferencer,
create: MuiInferencer,
canDelete: true,
},
{
name: 'imprint',
options: {
label: 'Imprint',
},
list: () => null,
}
]}
Title={Title}
Sider={Sider}
Layout={Layout}
Header={Header}
authProvider={authProvider}
LoginPage={AuthPage}
>
<Outlet />
</Refine>
</RefineSnackbarProvider>
</ColorModeContextProvider>
</Document>
);
}
