I am using WebStorm 2022 with React, JavaScript and MUI -- and I have been getting insanely slow performance, that it's become impossible to use.
Autocomplete takes around 6-7 seconds to load, and my CPU usage rockets up to 100% whenever I type anything in my JSX file.
Example code:
function UserInputBox() {
return (
<Box
display="flex"
flexDirection="column"
alignItems="center" p={5} boxShadow={3}
>
<Box
p={5}
sx={{background: "blue", alignItems: "stretch"}}
>
<h1>User Input</h1>
</Box>
<Stack spacing={2}>
<TextField label="Username" />
<TextField label="Age (Years)" />
<Button
variant="contained"
sx={{borderRadius: 28, textTransform: "none"}}
>
Add User
</Button>
</Stack>
</Box>
)
}
export default UserInputBox
Related
I am relatively new to material UI and I have designed a text field of type search. I would like it to be responsive. But I am failing to render the textfield in screen sizes with width smaller than 423
<Box
sx={{ flexGrow: 1 }}
m={5} pt={5}
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
>
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
<SearchIcon style={{ coSelf: "center", margin: "5px" }} />
<TextField
id="standard-search"
label="Search for a company..."
type="search"
variant="standard"
textAlign="center"
fullWidth
/>
</Grid>
<Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
<SettingsIcon/>
</Button>
</Box>
Any help is appreciated.
Seems your search component is rendered but hiding behind the Stock Market Charting header as it gets longer in smaller screen sizes. If you have it as a fixed position try changing it to relative position, or remove/reduce the text inside it so it gets shorter for a quick test and might reveal the search component.
In material UI v5 supposedly one can create almost anything with the sx prop, on the list is grid unfortunately I am unable to create what should be a simple grid. To illustrate here is what my grid would look like.
My unsuccessful attempts at using the Box component and sx prop look like this
What am I missing here, how can recreate what I have with the Grid component with the Box/sx combo?
Is it that you want ? Live example sandbox ?
<Box sx={{ placeContent: "center", display: "grid" }}>
<Box sx={{ gridRow: "1", gridColumn: "div 1" }}>
<TextField
name="name"
label="Name"
variant="outlined"
type="text"
margin="dense"
/>
</Box>
<Box sx={{ gridRow: "2", gridColumn: "div 1" }}>
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</Box>
</Box>
I want to dynamically generate a page in the Next-JS app. Inside this page should be imported automatically Icons which fetches from the server Instead of writing it statically:
{
"id": 1,
"title": "Budget",
"value": "$24K",
"persent" :"12%",
"duration" :"Since Last Month",
"icon":"MoneyIcon",
"rise":"false"
},
in this timeMoneyIcon from Material-UI.
In this case, was used map method in order to render fetched data.
How can I put this fetched icon name as a tag same as <MoneyIcon/> in the component?
{posts.map((post) => (
<>
<Grid item lg={3} sm={6} xl={3} xs={12}>
<Card sx={{ height: "100%" }}>
<CardContent>
<Grid container spacing={3} sx={{ justifyContent: "space-between" }}>
<Grid item>
<Typography color="textSecondary" gutterBottom variant="overline">
{post.title}
</Typography>
<Typography color="textPrimary" variant="h4">
{post.value}
</Typography>
</Grid>
<Grid item>
<Avatar
sx={{
backgroundColor: "error.main",
height: 56,
width: 56,
}}
>
**<MoneyIcon />**
</Avatar>
</Grid>
</Grid>
<Box
sx={{
pt: 2,
display: "flex",
alignItems: "center",
}}
>
<ArrowDownwardIcon color="error" />
<Typography
color="error"
sx={{
mr: 1,
}}
variant="body2"
>
{post.persent}
</Typography>
<Typography color="textSecondary" variant="caption">
{post.duration}
</Typography>
</Box>
</CardContent>
</Card>
</Grid>
</>
))}
If I understand you correctly you are trying to pass the MUI Icon to the Component and render the icon. For that you can simply pass the Icon as a value of your object wrapped in a React Fragment.
import AccountBalanceIcon from '#mui/icons-material/AccountBalance';
const myObject = {
id: 1,
value: "24K",
icon: <><AccountBalanceIcon/></>
)};
export default function MyComponent(props) {
return(
<div>
<span>{myObject.value}</span>
{myObject.icon}
<div>
)
}
You can import them dynamically by name for example you can fetch the Icon name from server then in the page do this:
import * as MuiIcons from '#mui/icons-material'
function YourPage({IconName}){
const IconComponent = MuiIcons[IconName]
return <Grid container>
<IconComponent />
</Grid>
}
and if you want for example #mui/icons-material/Memory the Icon name is "Memory".
But I think this approach is not treeshakable you may bring the entire jungle , I am not sure about that though, you should check the bundle after compiling.
I am creating tabs using material ui and i want to add value beside label (ex: 05 written beside Recommendation label) which will be dynamic in the tabs component just like shown in below image:
Here is my code snippet of Tabs component:
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Recommendation" />
<Tab label="Ongoing" />
<Tab label="Completed" />
</Tabs>
</Box>
One option is to create your own component, pass that in as a the Tab label, and then style it as needed. For example:
const TabWithCount = ({ children, count }) => {
return (
<Box sx={{ display: "inline-flex", alignItems: "center" }}>
<Typography component="div">{children}</Typography>
{count ? (
<Typography
component="div"
variant="body2"
sx={{ marginLeft: "0.5rem" }}
>
{count}
</Typography>
) : null}
</Box>
);
};
...
<Tab
label={<TabWithCount count="05">Recommendation</TabWithCount>}
/>
I've created a quick (unstyled) example to illustrate the solution: https://codesandbox.io/s/basictabs-material-demo-forked-i9543?file=/demo.js
I have a material-ui card in which it contains image, input field, check-box and a submit button. In which card is displaying onclick on some other option which is not mentioned in the below code. I want to close a card when I click on submit. How can I achieve this?
<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
<CardHeader
style={{
paddingBottom: 0,
paddingTop: 0
}}
title="Image"
/>
<img src="https://unsplash.it/200/?random" />
<CardContent className="details-card-body">
<TextField label="Name" fullWidth />
<Grid container>
<Grid item xs={4}>
<Typography>
New User
<Checkbox
checked={this.state.addNew}
name="addNew"
onChange={this.handleCheckBox("addNew")}
value="new user"
inputProps={{ "aria-label": "Checkbox B" }}
/>
</Typography>
</Grid>
</Grid>
<Button variant="contained" color="primary">
Click to Tag
</Button>
</CardContent>
</Card>
Here below is my code on CodeSandbox
https://codesandbox.io/embed/lppzx48r0m
There are multiple ways to achieve what you want to do
you'll need a flag to conditionally hide or show the card.
For example lets take flag variable in state, and change state variable flag based on submit button and on the basis of this.state.flag you can do
{this.state.flag ?
(<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
//Card content
</Card>)
:
null
}
You can also provide conditional css based on this.state.flag
<Card
className="details-card"
style={{ paddingTop: "0px", display: this.state.flag ? block : 'none'}}
color="primary"
>
//Card content
</Card>
P.S.: The second approach is not recommended because we are rendering element even if it is not needed.