Develop Reference

MUI V5 Why us Box with Grid component

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.

How can I align the last Material UI item in a flex row to the right?

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?

IOS react native onSelectionChange moves cursor to initial position when multline set to true

I have a basic text input with multiline set to true. Additionally it has selection and onSelectionChange props set which causes cursor to move to initial position whenever there is change in onChangeText.
Here it's the video : https://streamable.com/bchsz4
Here it's the repro : https://github.com/VivekNeel/IOS_SELECTION_CHANGE
Here it's the sample code :
<TextInput
onChangeText={handleChange}
value={value}
multiline
selection={selection}
onSelectionChange={handleSelection}
placeholder="Enter a text"
style={{marginTop: 100, marginHorizontal: 16}}
/>

Just not using selection props fixes this!

Material UI Autocomplete Chip multiline

I am using the Material UI Autocomplete component and would like to have multiline chips. I am using chips to display some text, where there can be up to around 10 words in that text. I am aware that is not the intended purpose of chips but this generally fits really nicely into my UI so I'd like to stick with them.
That said, on mobile (e.g. iPhone 8), a chip with around 10 words will display something like "The first few words...", where there will be ellipsis instead of the remainder of the text.
I have looked into using the renderTags property (with a Typography element using word-wrap for the chip label) and have tried that out but haven't made any forward progress using that. Does anyone have any advice/code snippets where they have gotten this working?

I figured out how to do it. Here is example code with multiline chips working (https://codesandbox.io/s/material-demo-eg6mb?file=/demo.tsx:332-1082). The key features that allow this multiline functionality to work are setting the chip's height to be 100% and using a Typography element for the label with whitespace: normal:
<Autocomplete
multiple
id="fixed-tags-demo"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[6], top100Films[13], top100Films[0]]}
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
label={<Typography style={{whiteSpace: 'normal'}}>{option.title}</Typography>}
{...getTagProps({ index })}
disabled={index === 0}
style={{height:"100%"}}
/>
))
}
style={{ width: 300 }}
renderInput={params => (
<TextField
{...params}
label="Fixed tag"
variant="outlined"
placeholder="Favorites"
/>
)}
/>

React Semantic UI : Table.Header Cell is not taking full width

I'm trying to add full width in Semantic React UI, but it's not taking full width.
Code:
<Table.Row>
<Table.HeaderCell style={{Width: '600px'}}>
<Search/>
</Table.HeaderCell>
</Table.Row>

Use props name 'colSpan' to defined number of who column
<Table.HeaderCell colSpan={8}>
<Search/>
</Table.HeaderCell>

Looks like you aren't modifying the first header cell for that column (which is actually Company Name, not search).
Here is an example on how to properly modify column widths in a table
https://codesandbox.io/s/5v800vplmk?module=/example.js
If your intent is to not make the search bar part of the table column structure, then you probably don't want to put it in a row / cell.