We Keep Coding

DatePicker Overly hiding under modal using MUI with react

The Parent Component is MUI Page then modal which is also from MUI and then inside the modal, I'm rendering the DatePicker
// #mui
import { DatePicker } from '#mui/x-date-pickers';
That's how it is being rendered.
<Controller
name="createDate"
control={control}
render={({ field, fieldState: { error } }) => (
<DatePicker
label="Date create"
value={field.value}
onChange={(newValue) => {
field.onChange(newValue);
}}
renderInput={(params) => <TextField {...params} fullWidth error={!!error} helperText={error?.message} />}
/>
)}
/>
But the problem is that DatePicker overly displays under the modal. How can I make changes so that can be fixed?
I tried this question's solution but it didn't help. The reason might be these answers are not for the MUI DatePicker. So I need your help fixing this. Thanks.

change the zIndex for the modal component <Modal sx={{zIndex: 3}} ... >

Material UI Autocomplete list items have padding I can't get rid off

I have this Autocomplete component in a React app as:
<Autocomplete
placeholder="Enter Suburb"
id="custom-input-demo"
options={Suburbs.map((suburb) => suburb.suburb)}
onChange={(event,value) => addSuburb(value)}
onFocus={()=>scrollToSuburb()}
defaultValue={customer.suburb ? customer.suburb : ''}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input style={{ width: 300 }} placeholder="Type.." type="text" {...params.inputProps} />
</div>
)}
/>
It appears with huge padding on the items as:
Render screenshot
I tried every possible way to alternate this style but wasn't able to.
What is the best way to style the Material UI react Autocomplete list?

How do you style custom data grid toolbar items?

I have this toolbar with 2 custom buttons and 3 imported material data grid toolbar components, I want them to match but preferably apply the material styles to my custom components yet I can't find a style import for them anywhere in their docs. But anyway I can get them to match would be huge. Does anyone have some advice?
const Toolbar = () => {
return (
<GridToolbarContainer>
<div
className={classes.toolbar}
onClick={() => {
toggleSearch();
}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
<div
className={classes.toolbar}
onClick={() => {
bookmarkCases(selectedRows);
}}
>
<BookmarkBorderIcon />
<p>SAVE CASES</p>
</div>
<GridColumnsToolbarButton />
<GridDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
};

Instead of making an icon button out of a <div>, why not use the startIcon prop in an MUI <Button />, e.g.
From this:
<div
className={classes.toolbar}
onClick={() => {toggleSearch()}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
to this:
<Button
className={classes.toolbar}
onClick={() => {toggleSearch()}}
startIcon={<SearchIcon />}
>Search
</Button>
All the styles should match because MUI DataGrid toolbar buttons are just MUI Buttons

After a bit of a struggle I found a solution. I was able to achieve a consistent style for all toolbar buttons by passing the styles through the DataGrid itself.
export const StyledDataDrid = styled(DataGridPremium)<DataGridPremiumProps>(({ theme }) => ({
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
fontSize: '16px !important',
color: '#074682',
},
'& .MuiBadge-badge': {
backgroundColor: '#074682',
},
},
}));
Or you can style it on the DataGrid component using the sx property as explained in this issue: https://github.com/mui/mui-x/issues/3686#issuecomment-1018469717

react-bootstrap component Switches not working

The bootstrap switches not seems to be working. Even the documentation version not workng
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
/>
<Form.Check
disabled
type="switch"
label="disabled switch"
id="disabled-custom-switch"
/>
</Form>

Simple FormCheck is working for me:
<FormCheck
id="switchEnabled"
type="switch"
checked={this.state.settings.enabled}
onChange={this.toggleEnabled}
label="Enable"
/>
The key point was to provide id. Another important thing (to load the initial value) was to use checked property.

Unfortunately documentation for the switch isn't the greatest. Nevertheless, the following should help with setting up the switch for your use.
const [isSwitchOn, setIsSwitchOn] = useState(false);
const onSwitchAction = () => {
setIsSwitchOn(!isSwitchOn);
};
...
<Form>
<Form.Switch
onChange={onSwitchAction}
id="custom-switch"
label="anything you want to put here"
checked={isSwitchOn}
disabled // apply if you want the switch disabled
/>
</Form>
...

I found an approach.
import React from "react";
import ReactDOM from "react-dom";
import { Container, Form, FormCheck, Button } from "react-bootstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
const [swt, setSwt] = React.useState(true);
const [swt2, setSwt2] = React.useState(true);
return (
<Container className="App">
Aprroch 1
<FormCheck custom type="switch">
<FormCheck.Input isInvalid checked={swt} />
<FormCheck.Label onClick={() => setSwt(!swt)}>
{`Value is ${swt}`}
</FormCheck.Label>
</FormCheck>
Approch 2
<Form.Check custom type="switch">
<Form.Check.Input isInvalid checked={swt2} />
<Form.Check.Label onClick={() => setSwt2(!swt2)}>
{`Value is ${swt2}`}
</Form.Check.Label>
</Form.Check>
</Container>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
codeSandbox

If you add the custom property it will show the switch button, but I'm still not able to toggle the switch...
<Form>
<Form.Check
custom
type="switch"
id="custom-switch"
label="Check this switch"
/>
</Form>

I had a similar issue and adding custom as suggested in another answer showed the switch correctly but similarly the toggle would now work.
I noticed that I was pointing at an older version of react-bootstrap so changed this to point to the current version which at the time is v1.0.0-beta.16 and this allowed the toggle to work and custom to be removed.
So best to make sure you are pointing at the latest version of react-bootstrap if you're having problems like this: React Bootstrap

I used classes like simple bootstrap
<div className="form-check form-switch">
<input className="form-check-input" type="checkbox" id="flexSwitchCheckDefault"/>
<label className="form-check-label" for="flexSwitchCheckDefault">
switch checkbox input
</label>
</div>

<FormCheck
id="switchEnabled1"
type="switch"
checked={this.state.settings.enabled}
onChange={this.toggleEnabled}
label="Enable"
/>
Changing the id of the switch from switchEnabled to switchEnabled1 seems to be working. You have to have different id for the switch if you are using it at multiple places.

I think we need to use useState like this
<Form.Check
type="switch"
id="custom-switch"
label="Email"
checked={emailChecked}
onChange = {() => setEmailChecked(!emailChecked)}
style={{ marginLeft: '20px' }}
/>

How to override the width of a TextField component with react MUI?

I'm trying to reduce the width of the TextField component :
Here is the render method:
render() {
return (
<div>
<div>
<form onSubmit={this.handleSubmit}>
<TextField
hintText="Email"
ref="email"
/><br/>
<TextField
hintText="Password"
type="password"
ref="password"
/><br/>
<button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button>
</form>
</div>
}
</div>
);
}
}

You also can look at fullWidth property to make sure it is set properly.
<TextField
id="full-width-text-field"
label="Label"
placeholder="Placeholder"
helperText="Full width!"
margin="normal"
fullWidth // this may override your custom width
/>

You could either specify inline style on element like below
<TextField
hintText="Email"
ref="email"
style = {{width: 100}} //assign the width as your requirement
/>
Or you could do as below.
Declare a styles variable with css properties.
var styles = StyleSheet.create({
textFld: { width: 100, height: 40} //assign the width as your requirement
});
Assign it to style in your render code.
<TextField
hintText="Email"
ref="email"
style = {styles.textFld}
/>
Give it try let me know if it works for you. I am new to react js as well.
You could refer to documentations and other similar question on SO for clarity.
http://facebook.github.io/react-native/docs/style.html#content
http://facebook.github.io/react-native/
http://facebook.github.io/react-native/docs/flexbox.html#content
React.js inline style best practices

If you want to make the TextField's width expanded as much as the parent's width (width: 100%):
<TextField label="Full width" fullWidth />
If you want to set the TextField's width to the exact value:
<Box width={350}>
<TextField label="width: 350px" fullWidth />
</Box>
You can also set the style of the TextField directly if you don't want to add a wrapper component:
V5
<TextField label="width: 350px" sx={{ width: 350 }} />
V4
const useStyles = makeStyles({
root: {
width: 350
}
});
function App() {
const classes = useStyles();
return <TextField label="width: 350px" className={classes.root} />;
}
I'd advice you against using inline styles as suggested in other answers since inline styles are harder to override. You should by default use Material-UI styles because it's more flexible and better integrated with Material-UI components. For example, you can cherry-pick the sub-components to override in a larger components, or style psuedo classes and elements, which can't be done with inline style.
Live Demo