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.

ReactJS: clickable text - how can I disable click outside the text area?

I have a clickable text component with Material UI Typography:
<MDBox mt={2} mb={1}>
<MDTypography variant="body2" style={{color: 'white', cursor:"pointer"}}
onClick={()=>dispatch({type: "goBackToPage1"})}
>
Go back to previous page
</MDTypography>
</MDBox>
As you can see, the Typography takes up the entire row area, such that even if I put the mouse on the green area (on the same row but outside the text area), the mouse still turns into a pointer and you can still click it.
How do I restrict clicking to be strictly on the text, instead the whole row area?

You can try to pass "component" prop to MUI Typography and and set it as span
<Typography component="span">
...
</Typography>

MUI Tab indicator styling override

I am currently trying to customize the MUI tab so that the indicator instead of a line at the bottom is a background color. After research I have found that using the TabIndicatorProps and passing it a style of display:none gets rid of the indicator completely. backgroundColor:"color" changes the line color but I cant figure out how to change it from a line to the whole background.
Some possible solutions I tried but did not work was giving the TabIndicatorProps a height:100% This create the background but masks the text in the tab. After that giving it an opacity: .8 gives me the effect I want but the text is too dark and I can't get it to change as the tab is active.
Expected Tab Image
Current Tab Image
<Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
<Tabs TabIndicatorProps={{
style: {
backgroundColor: '#D2603D',
borderRadius: '5px',
},
}} value={value} onChange={handleChange}>
<Tab textColor='blue' onClick={handleClick} sx={{
backgroundColor: '#F4F5F9',
borderRadius: '5px',
}} label="Daily" />
< Tab sx={{
backgroundColor: '#F4F5F9',
}} label="Weekly" />
<Tab sx={{
backgroundColor: '#F4F5F9',
borderRadius: '5px'
}} label="Monthly" />
</Tabs>
</Box >

I don't think that is possible in a clean way. Either quite dirty workarounds or substantial re-implementation of the functionality is necessary.
The tab labels are <button> elements, the tab indicator is a <span> that lies above these buttons, but you want the labels appear above the indicator.
So you have to either rearrange the stacking of the HTML elements, or add a second label above the indicator.
It is not possible to let the tab indicator slide behind the button text, but in front of the button background.
Some suboptimal ("dirty") workarounds
You could re-arrange the stacking of the HTML elements.
This can be done by using z-index. You have to set the z-index of the buttons, and you need to keep the
button background transparent.
Note that you might have to be careful if there are other elements which already have a z-index,
or should stay behind the buttons, in which case you would need to change the z-index of these other elements as well.
<Tab label="Daily" style={{ zIndex: 1 }} />
<Tab label="Weekly" style={{ zIndex: 1 }} />
<Tab label="Monthly" style={{ zIndex: 1 }} />
You could add the current label as a children of the tab indicator, and set the style to match the original label. You would also need to pass the current label,
and the label would slide with the indicator, or the indicator would be empty while sliding.
const IndicatorLabel = ({ label }) => {
return <span className={'indicator-label'}>
{ label }
</span>;
};
// ...
<Tabs
TabIndicatorProps={{
// ...
children: <IndicatorLabel label={ currentLabel } />
}}
>
// ...
You could set the background color of the <button> dynamically, and not use the indicator at all. Of course, you would lose the sliding effect.
Of course, you could implement you own tab indicator from scratch, and don't use the MUI tab indicator.

Material UI tabs not working with Scroll to

I am trying to scroll to div when clicking on Tab with Material UI Tabs, UseRef and ScrollTo.
Sand box Link: https://codesandbox.io/s/exciting-sound-mrw2v
when clicked on Tab 2, I am expecting to scroll onto Tab2 Contents and Tab 1 contents visible on scrolling.Currently it requires two clicks to scroll onto the div, I am wondering why its behind one click. Any leads appreciated. Thanks!

I edited your example and I added a useEffect hook and if you press a tab 2 is scrolling into this content.
https://codesandbox.io/s/lingering-voice-y45cg

use this syntax
<Tabs
classes={{ root: classes.root, scroller: classes.scroller }}
value={active}
onChange={(event, newValue) => {
setActive(newValue);
}}
indicatorColor="primary"
textColor="primary"
variant={"scrollable"}
scrollButtons={"on"}
>
{cities.map((city, index) => (
<Tab key={index} label={city} value={city} />
))}
</Tabs>
this two line of properties important
variant={"scrollable"}
scrollButtons={"on"}
full example link: https://codesandbox.io/s/material-ui-centered-scrollable-tabs-ud26w?file=/index.js:645-1048

Material-Ui textfield Hinttext not working

I want to design textfield according to job requirement. I am assigning background to TextField. Now when background color is assigned then its hintText is gone. Then i have to set z-index of that label manually.
Now hintText is showing but when i click on that text then Textfield is not working and when i click outside of text then it is working.
This is my textfield style:
<TextField
hintText="Rate"
className="rateText"
inputStyle={{background:"#fff",paddingLeft: "3px"}}
style={{paddingBottom:"10px"}}
hintStyle={{color: "rgba(0,0,0,.26)",zIndex: "1",bottom: "20px",left: "5px"}}
/>

Try setting the backgroundColor on the style, rather than the inputStyle. The textbox itself will remain transparent and its placeholder text will continue to work, but the white background of the container div will show through:
<TextField
hintText="Rate"
style={{ backgroundColor: '#fff' }}
/>