[data grid] How to style Single Select options in edit mode within the DataGrid

[AnitaMartinez]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I am struggling to find a way of styling the select options in the edit mode of a cell within the Datagrid.

I have used the sx property in the popper component using componentsProps.basePopper, but it does not work.

Expected behavior 🤔

I was wondering if there is a way to style the options of the single select within the Datagrid without having to create my own edit component.

Steps to reproduce 🕹

CodeSandbox

Context 🔦

This problem has arisen because I would like to hide or disable one of the select options (in this case, "deleted"). I can't remove it directly from the valueOptions in colDef because I need that option to show up in Filters.

Your environment 🌎

npx @mui/envinfo

``` Browsers: Chrome: 103.0.5060.53 Firefox: 100.0.2 Safari: 14.0.1 ```

Order ID 💳 (optional)

No response

[willTherapyChat]

+1

[alexfauquette]

That's a bit tricky. The components.BasePopper only override when the data grid is using <Popper/>

Here it is a <Select/> which internally uses the Popper. So you can pass props to the Select but not the Popper inside the Select

For your use case, what would you think about removing the option? The valueOptions can be a method that renders options depending on the row.

Here is a demo where deleted is in the filter, but not the rows https://codesandbox.io/s/styling-options-single-select-forked-bx5oh6?file=/src/App.tsx

valueOptions: ({ row }) =>
      row === undefined
        ? ["active", "deleted", "inactive"]
        : ["active", "inactive"]

[AnitaMartinez]

Thanks! It works now 🚀

[Vituli]

Is there way to style the cell not it edit mode? meaning i want to user will understand that the cell is dropdown. because now the user should double click on the cell to get the value options

(without using rendercell )