[FIXED] How To Disable Grid and its children in React js MUI

Issue

I Want to Disable Grid (MUI Component) (and its Children) in React js .

and also , I Want to know how to Disable any Container and it's items in React js! (No matter what kind of children it has)

ex:

 <Grid
       item
       disabled  //And any other options
       xs={12}
       md={6}
       spacing={1}
       style={{ padding: '5px' }}>
       <CmpDateTimePicker
         label="from"
         value={this.props.from_timestamp}
         onChange={(from_timestamp) => 
             this.props.OnFromPeriodChanged(from_timestamp)}
         dir={dir}
         intl={intl}
         preSelect={lastMonthDate}
         />
  </Grid>

Thanks for your Help! :)

Solution

We Can disable Element via pointer-events: none property.

js file:

     <Grid
       item
       className={this.state.isDisabled ? "container-disabled" : "container"}
       xs={12}
       md={6}
       spacing={1}
       style={{ padding: '5px' }}>
       <CmpDateTimePicker
         label="from"
         value={this.props.from_timestamp}
         onChange={(from_timestamp) => 
             this.props.OnFromPeriodChanged(from_timestamp)}
         dir={dir}
         intl={intl}
         preSelect={lastMonthDate}
         />
  </Grid>

css file:

.container-disabled{
   pointer-events: none;
}

.container{
  /* some styles */
}

Answered By - MohammadHossein
Answer Checked By - - Robin (ReactFix Admin)