So I have this file called AuthHeader.js in which I am attempting to render children surrounded by a Suspense boundary with a fallback. I added a 5 second delay on the API hoping to see a loader, but it shows blank. I hope someone may be able to help.
I have imported it correctly below:
import { useState, Suspense } from "react";
AuthHeader.js
<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
display: { xs: open ? "none" : "block", md: "block" },
}}
>
<DrawerHeader />
<Suspense fallback={<Spinner />}>
{/* A component that uses Suspense-based */}
{children}
</Suspense>
</Box>
Spinner is contained inside the AuthHeader.js component.
// create a Spinner component with a Circular spinner inside it
const Spinner = () => (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<CircularProgress />
</Box>
);
I also have the following setup on next.config.js
module.exports = {
reactStrictMode: true,
experimental: {
concurrentFeatures: true,
},
images: {
domains: ["images.pexels.com"],
},
};
Using #mui/material/useMediaQuery in Next.js causes style flickering on first rendering.
I know this is due to the useMediaQuery value changing between server side and client side.
Is there any way to fix this?
import { useTheme } from '#mui/material/styles';
import useMediaQuery from '#mui/material/useMediaQuery';
...
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('md'));
...
<Typography variant={matches ? 'subtitle1' : 'h5'}>
{text}
</Typography>
Although this can be easily resolved by specifying display as shown below to switch the display
This verbose writing style should be avoided as much as possible.
<Typography sx={{ display: {xs: 'block', md: 'none'} }} variant={'subtitle1'}>
{text}
</Typography>
<Typography sx={{ display: {xs: 'none', md: 'block'} }} variant={'h5'}>
{text}
</Typography>
I have an elementary component.
With sx I try to add styles, but they are not added to the Drawer, but to its parent block and because of this the styles are not applied.
What am I doing wrong?
Thanks.
import React from "react";
import Typography from "#mui/material/Typography";
import Drawer from "#mui/material/Drawer";
export const Menu= () => {
return (
<Drawer
variant="permanent"
sx={{ width: 240, fontSize: 14, bgcolor: "green" }}
>
<Typography>My Own Logo</Typography>
</Drawer>
);
};
Blocks with styles
You need to step into the root css of the drawer:
<Drawer
variant="permanent"
sx={{ "& .MuiDrawer-paper": { width: 240, backgroundColor: "green" } }}
>
<Typography fontSize={22}>My Own Logo</Typography>
</Drawer>
Control the font size with the Typography component.
Here's a sandbox
I use Container and it needs to be different size for mobile and for desktop.
How can I have the Container maxWidth different size based on Breakpoints like this:
<Container maxWidth={{xs:"lg", lg:"md"}}>
instead of using the useStyle and adding a className.
I found most of answer related to functional component, but if you are using class component we can directly use like this. I like to use 'vh' and 'vw' as this unit is direclty adjustable to viewport.
<Container
sx={{
width: {
lg: '35vw',
md: '50vw',
xs: '70vw'
}
}}>
You can do that by using the sx prop which supports responsive values. The breakpoint values can be accessed in theme.breakpoints.values object. See the default theme here to know more.
const theme = useTheme();
<Container
sx={{
bgcolor: "wheat",
maxWidth: {
lg: theme.breakpoints.values["md"],
md: 80,
xs: 20
}
}}
>
<Box sx={{ bgcolor: "#cfe8fc", height: "100vh", width: "100%" }} />
</Container>
I want to change the title in CardHeader to 16px. I tried changing theme in App.js but it does not seem to work
const theme = createMuiTheme({
typography: {
useNextVariants: true,
overrides: {
MuiCardHeader: {
titleTypographyProps: {
variant:'h2'
}
}
}
}
);
In the component:
<CardHeader
action={
<IconButton color="inherit">
<MoreHorizIcon />
</IconButton>
}
title="Titletext"
/>
The title font still does not change. What do I need to do to fix this?
you cant target the header class or id and change fontSize or
pass as props
titleTypographyProps={{variant:'h1' }}
that object acepts:'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit', "display4", 'display3', 'display2', 'display1', 'headline', 'title', 'subheading'
in your code it would be
<CardHeader
action={
<IconButton color="inherit">
<MoreHorizIcon />
</IconButton>
}
titleTypographyProps={{variant:'h1' }}
title="Titletext"
/>
I know this is quite old post now, but for future references anyone who stumbles upon this question might take a look at: https://github.com/mui-org/material-ui/issues/7521
Basically, we can use the classes property, which takes key/value pairs, and can add style to parts of the <ContentHeader /> component based on that.
Example:
const useStyles = makeStyles({
root: {
minWidth: 300,
maxWidth: 500,
margin: "10px 15px 10px 0",
},
headerTitle: {
maxWidth: 300
}
});
const CustomizedCard = () => {
const materializeUIClasses = useStyles();
return (
<Card className={materialUIClasses.root}>
<CardHeader
title={title}
// Here we can target whatever part we need: title, subtitle, action
classes={{
title: materialUIClasses.headerTitle
}}
/>
</Card>
}
this piece of code worked for me:
<CardHeader
title={
<Typography gutterBottom variant="h5" component="h2">
/* Content goes here */
</Typography>
} />
notes: package: "#material-ui/core": "^4.5.2"
I use this solution because I make use of makeStyles module.
In MUI v5, you make use of system properties in Typography by adding a fontSize prop directly in titleTypographyProps or subheaderTypographyProps:
<CardHeader
titleTypographyProps={{
fontSize: 22,
}}
subheaderTypographyProps={{
fontSize: 10,
}}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
Live Demo