How is possible to there is no option to minify the prod class names? It is a a big step back. Please say me that I am not right.
In Material v4 can be achieved with 3 simple rules:
Only one theme provider is used (No theme nesting)
The style sheet has a name that starts with Mui (all Material-UI components).
The disableGlobal option of the class name generator is false (the default).
In v5.5 in my experiment I don`t use any custom styles, just default provided from MUI components.
"react": "^18.0.0",
"react-dom": "^18.0.0",
"#emotion/react": "^11.8.1",
"#mui/material": "^5.5.2"
import { ThemeProvider, createTheme } from '#mui/material/styles'
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...this.props} />
</ThemeProvider>
import { Paper, Grid, Typography, Box } from '#mui/material'
<Grid container component={'main'}>
<Grid item xs={false} sm={4} md={8} />
<Grid item xs={12} sm={8} md={4} component={Paper} elevation={6} square>
<Typography component={'h1'} variant={'h4'} align={'center'}>
<Box fontWeight={'fontWeightLight'} m={1}>
{'MY ACCOUNT'}
</Box>
</Typography>
</Grid>
</Grid>
In production build I expect to be something like this:
jss1 jss2 jss3 jss4 jss5 jss6 and etc...
but the result is:
MuiGrid-root MuiGrid-container css-1d3bbye
MuiGrid-root MuiGrid-item MuiGrid-grid-sm-4 MuiGrid-grid-md-8 css-18mwvdj
I think i found it
https://v5-0-6.mui.com/guides/classname-generator/
Converts from
<button
class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1ujsas3"
>
Button
</button>
to
<button
class="foo-bar-MuiButton-root foo-bar-MuiButton-text foo-bar-MuiButton-textPrimary foo-bar-MuiButton-sizeMedium foo-bar-MuiButton-textSizeMedium foo-bar-MuiButtonBase-root css-1ujsas3"
>
Button
</button>
I have just tried it with latest MUIv5 and works great.
Related
In my react app, I would like to control open/close of a material ui v5 Datepicker by clicking an icon button:
function handleShowCalendar() {
setState({ showCalendar: true })
}
<TextField
{...params}
autoFocus={props.autoFocus}
fullWidth
placeholder="Enter a task..."
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
onKeyUp: handleKeyUp,
endAdornment: addTodo.isLoading ? (
<Box position="absolute" top={10} right={10}>
<CircularProgress size={16} />
</Box>
) : (
<Box position="absolute" top={-4} right={0}>
<IconButton
onClick={handleShowCalendar}
disabled={state.text.length <= 0}
>
<CalendarToday />
</IconButton>
</Box>
),
}}
/>
...
<DatePicker
open={state.showCalendar}
value={state.due}
onChange={handleChangeDate}
onClose={() => setState({ showCalendar: false })}
disableHighlightToday
// DialogProps={{ sx: { postition: "inline" } }}
renderInput={(params) => <Fragment {...params} />}
showToolbar={true}
ToolbarComponent={() => (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Due Date</Typography>
</Toolbar>
</AppBar>
)}
/>
</Fragment>
The problem is the position of the Datepicker is always at the top left corner. Can anyone help why the Datepicker won't show like inline, what I am missing in above code? Thanks.
As an answer to the question in the title, it seems that the code you have posted does open and close the DatePicker.
It sounds like the second question is the one that needs answering, whether it will show "inline".
It seems that the "absolute" position of the Box surrounding the IconButton and the hardcoded top and right values are preventing the borders of the DatePicker from being inside of the TextField.
Here's a Code Sandbox illustrating a DatePicker within a TextField.
If you would like to clarify the positioning you prefer, please do so.
Im implementing material Ui in my project.I have list of cards ..I want them to appear one by one in a horizontal row and then in the same pattern in the next row.But my cards are appearing one below the other.I have tried adding some custom css but it dosent work.Pls check out my code.There are like two cards. with the box im able to adding some margin to my cards .How to make them appear next to each other?
function Blogs(){
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="It’s a cocktail o’clock."
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://img.freepik.com/free-photo/selection-various-cocktails-table_140725-2909.jpg?w=2000"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="Winner Winner Pizza Dinner"
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://cdn.shopify.com/s/files/1/0624/9853/articles/20220211142645-margherita-9920.jpg?crop=center&height=800&v=1660843558&width=800"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</>
);
}
export default Blogs;
Use MUI Grid for responsive layout and horizontal row
import { Grid } from "#mui/material"
<Grid container direction="row" justifyContent="center">
<Grid item xs={4}>
<Card> ..... </Card>
</Grid>
<Grid item xs={4}>
<Card> ..... </Card>
</Grid>
<Grid item xs={4}>
<Card> ..... </Card>
</Grid>
</Grid>
xs={4} will display 3 Cards in each row because 12/3 = 4 as MUI uses 12 columns grid system. You can also use md, sm, lg, xl for different screen sizes.
I'm creating a form and now attempting to get the value for a summary page.
I'm not having trouble in selecting the radio buttons. The problem lies in getting the value of radio button in material-ui for a summary page/print the value.
The following are my code:
Registering Office: <br></br>
<Grid container direction={'row'} spacing={1}>
<Grid item xs={3}>
<Radio id="RegOffice" value="Head Office" checked={RegOffice==="Head Office"} onChange={handleChangeRegOffice}
color="primary"
/>
Head Office
</Grid>
<Grid item xs={3}>
<Radio id="RegOffice" value="Branch Office" checked={RegOffice==="Branch Office"} onChange={handleChangeRegOffice}
color="primary" />
Branch Office
</Grid>
<Grid itemxs={3}>
<Radio id="RegOffice" value="Facility" checked={RegOffice==="Facility"}
onChange={handleChangeRegOffice}
color="primary" //label="Facility"
/>
Facility
</Grid>
</Grid>
for handlechange:
const [RegOffice, setRegOffice] = React.useState('Head Office')
const handleChangeRegOffice = (event) => { setRegOffice(event.target.value)
console.log(RegOffice) }
=end=
With no luck, every time I call "RegOffice", it always returns blank value.
Appreciate any help. thank you
You code is fine, but you're doing console.log(RegOffice), before the state is updated. React set/update state Asynchronously, which means when you're viewing the console.log(RegOffice) the regOffice state still contains the old state value. The updating state is a really vital React concept and learning about it will be very beneficial for creating/understanding the React Code. Here is a docs link
I've created the codesandbox link out of your code and just moved the console.log() outside the handleChangeRegOffice function.
const handleChangeRegOffice = (event) => {
setRegOffice(event.target.value);
};
console.log(RegOffice);
the updated function and console statement
My objective is to write the same full width in xs, sm, md, lg for the Card display. Can anyone help me in this query?
This is my code:
import {
Grid,
Card,
CardHeader,
Avatar,
IconButton,
CardContent,
Typography
} from "#material-ui/core";
import React from "react";
import "./styles.css";
import MoreVertIcon from "#material-ui/icons/MoreVert";
class App extends React.Component {
render() {
return (
<Grid container spacing={1}>
<Grid item xs={12}>
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
This impressive paella is a perfect party dish and a fun meal to
cook together with your guests. Add 1 cup of frozen peas along
with the mussels, if you like.
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
);
}
}
export default App;
Here is the Code Sandbox sample
Using Intersection Observer API I'm trying to render a Material-UI Component by visibility on the viewport.
export default function Index() {
const [onScreen, theRef] = useOnScreen({
rootMargin: "-300px",
ssr: true
});
const classes = useStyles();
return (
<Container maxWidth="sm">
<DummyContainer />
<div
ref={theRef}
style={{
height: "100vh",
padding: "20px",
backgroundColor: "green",
transition: "all .5s ease-in"
}}
>
{onScreen && (
<Box className={classes.rootBox} my={16}>
<Typography variant="h2" gutterBottom>
Content Lazy using Intersection Observer
</Typography>
<Copyright />
</Box>
)}
</div>
<Box className={classes.rootBox} my={4}>
<Typography variant="h2" gutterBottom>
Content no lazy, why this Box loses margin?
</Typography>
<Typography gutterBottom>
If you request this page with JavaScript disabled, you will notice
that has been properly rendered in SSR
</Typography>
</Box>
</Container>
);
}
Basic stuff, onScreen is a toggled boolean using Intersection Observer
In order to be "SEO friendly" I'm using NextJS and I wanted this component to always be visible in SSR and conditional visible in CSR.
The problem arises during rehydration in CSR, it's seems that some classnames after the lazy component are recreated and I'm losing styling in second Box component.
I've created this CodeSandbox to have a look : https://codesandbox.io/s/nextjsmaterialuiclassnamemismatch-1j4oi
Is this a bug in MaterialUI, JSS? Or most probably I'm doing something wrong?