I'm using MUI to learn some react for the first time. I'm wondering why use the Box component along with the Grid component. From the docs it shows this as an example
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
);
}
I removed the Box component applying any props to the outermost Grid and everything seems the same, I think. Is there an advantage to wrapping a Grid component with a Box? Any help in would be great!
Removing outer most container seems to do nothing
Box = div
Check it out here: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Box/Box.js
Which just calls this: https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createBox.js
It's a div that accepts camelCase css props and adhere's to MUI's styling system rules, that's it - it's a div
Almost everywhere you see Box used, replace it with div with the inline CSS props and you'll have the same thing
In your code example, it would only make sense if it were the child of a flex container. Otherwise, it literally does absolutely nothing (that a normal div doesn't), because flex-grow is only relevant inside flex containers.
Related
I have a weird problem. I'm mapping options for a submenu inside of a div (container for the submenu). And I set width of the DIV to be '100%'. However, the following submenu divs take the same width, even though they do not need it.
I have provided some screenshot to describe it better. You see the first submenu reaches max-width which is 400. And automatically, the second div has 400px width even though it clearly does not need it.
I tried using width='fit-content', or not assigning width ( so that it calculates it itself ). But they do not help at all, the submenu collapses completely and has like 50px width - which is unreadable.
Is there any way to achieve different width for all the submenus?
EDIT (code):
{showNestedOptions && (
<Box
w="100%"
maxW="400px"
>
{map(props.data.nestedOptions, (nestedOption, index: number) => {
return (
<Box>
<Option textAlign="left">
<Box h={'100%'} whiteSpace="normal">
{label}
</Box>
</Option>
</Box>
);
})}
<Box> = <div>
<Option> = <option>
all the options have the width of the widest element, and I'd like them to each adapt to the biggest element of each submenu
CSS grid layout has the grid-column property to specify grid item location
(e.g. grid-column: 1 / 3)
I want to do the same using Material UI's Grid component, but it doesn't allow me to specify the certain starting and ending points, just the number of columns taken at all.
(e.g.
<Grid container rowSpacing={1}>
<Grid item xs={8}>
Item 1
</Grid>
<Grid item xs={4}>
Item 2
</Grid>
</Grid>
For example, I want the first Item to be located from 2 to 4 column and the second Item to be located from 7 to 10 column. How do I do that in MUI v5?
The Grid component from Material UI has a misleading name. Their Grid component is not based on CSS Grid, It's actually CSS Flexbox with added features. So you wouldn't be able to use it like CSS Grid. You can just use CSS Grid and you won't have any conflicting issues.
I am trying to write a React App that has text lined up in a row, and I want the last item to be aligned to the far right. I am using Material UI with a Box API to contain all my elements, with each item being a Typography element.
<Box display="flex" flexDirection="row" alignItems="flex-start">
<Typography align='left' className={classes.currentlyPrinting}>
Currently printing:
</Typography>
<Typography align='left' className={classes.filenameText}>
Filenamjoojpe
</Typography>
<Typography className={classes.completion}>
(3 of 4 completed)
</Typography>
<Box justifyContent="flex-end">
<Typography className={classes.percentage}
style={{display: 'inline-block'}}>30%
</Typography>
</Box>
</Box>
So I tried putting the last Typography element within a box container, and used "justifyConent = flex-end" but it did not work out. The following image shows what I want to happen:
So I want the text that says "30%" to be aligned with the right side of that progress bar I have. The reason for this is that the other three typography elements can have varying characters of text, so I cant just use padding for it. Any ideas?
I have a Card component which is as below in HTML:
<div class="MuiPaper-root MuiCard-root makeStyles-Card-5 MuiPaper-elevation1 MuiPaper-rounded">
And I need to change the MuiPaper-elevation1 to MuiPaper-elevation0, which remove the shadow.
I tried
<Card
MuiPaperElevation0
MuiPaper-elevation0
style={{ boxShadow: 0 }}
>
but it doesn't work, nothing changed and the shadow is still there.
Could someone teach me how to do it plz?
Thx!
You can use the underlying Paper props like this:
<Card
elevation={0}
>
Essentially you can apply any prop to card that you would apply to the Paper element
The Card API accepts an elevation prop (inherited from the Paper component). In order to change the elevation, you pass it a number. This will remove the box shadow without needing to add your own styling
API: https://material-ui.com/api/paper/
<Card elevation={0}>
....
</Card>
You should just set boxShadow to none:
<Card style={{ boxShadow: 'none' }} >
I'm displaying some data on a page using TextField of #material-ui .
The problem is every record of data has different length of data, so most of the values being presented looks ugly (only 10% of the textfield width is used)
I'm currently using fullWidth attribute , but it doesn't do what I want . I want the underline to match the length of the content .
<Grid item sm={2}>
<TextField
margin="normal"
fullWidth
inputProps={{ disabled: true }}
label={labels.brokerId}
value={props.brokerDetails.id}
/>
</Grid>
How can I achieve it ?
You should try with multiline property of TextArea component.
https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/text-fields/TextFields.js