material-ui | A modern UI for Atom | Frontend Framework library

I'm trying to implement a Select component using reactjs material ui and typescript.

However, I am getting the following typing error:

I am trying to make a page responsive but, I am not able to make an image responsive as it is getting off the grid container in material UI. Is there a way I can make the image responsive? I am trying to add the image in Grid container, Still, it is showing the same.

package.json

I am using Material-UI and trying to make a Grid that contains two Grid Items:

1. a List of dozens of ListItems.
2. a static control panel.

Here is an example minimal sandbox that I'm starting with: https://codesandbox.io/s/material-ui-grid-center-vertically-v2-forked-cju60?file=/index.js

In my ideal world, I would like Column 1 to scroll and Column 2 to remain in place. That is, the height of the parent Grid would match the green column's height and the yellow column would overflow into a scroll of a matching height.

Unfortunately, I cannot set a height (or max-height) of the Grid itself (with something like style={{maxHeight: "500px", overflow:"scroll"}} as this causes both columns to scroll. Further, I cannot set a fixed height for the green column, as the user can dynamically add and remove selectors from that column.

Is the functionality I'm looking for possible?

I cannot seem to see what is going wrong here, pretty basic usage to useContext and useState hooks. I have a darkModeContext where I am literally just flipping the boolean for darkMode, but whilst trying to flip it for the context I am getting setContext is not a function.

I took some code out from the navDrawer to make it easier to see but here is the error I am getting along with the code:

DarkThemeContext.js

I am using one of materialUI's built-in components to display data on one of my sites. Currently, the code that was implemented is very closely based off of the examples on the MaterialUI API site. With that said, I have made a few adjustments for my own personal use case. This is how each of the columns that I need are labeled (5 total). I've also included my code below.

As per the title, I was hiding couple of columns in xgrid and it throws a error/warning in the console.

Warning: Failed prop type: Material-UI: The anchorEl prop provided to the component is invalid. The anchor element should be part of the document layout. Make sure the element is present in the document or that it's not display none.

I'm currently trying to implement a CodeMirror of sorts with the help of ACE Editor. I've tried using state alongside the 'onClick' button param but am unable to actually get this working.

I am using the react material UI slider and want to customize the color of the pointer from default value blue to pink? I have tried modifying the thumb and finger in withStyles object.But it doesn't work.

https://material-ui.com/components/slider/

I want to customize the color of the slider pointer.