You can do it using sx props or overriding default styles with emotions. I would say the best approach is doing it with sx props. But i think in your code you have missed some targeted valid classes. i’ll have the corrected one below according to my knowledge.

 sx={{
  '& .MuiDataGrid-paper': {
    color: theme.palette.secondary.dark,
    '& .MuiDataGrid-panelWrapper': {
      background: theme.palette.secondary.dark,
    },
  },
  '& .MuiOutlinedInput-root': {
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: `${theme.palette.secondary.dark} !important`, // Input border color
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: `${theme.palette.secondary.light} !important`, // Hover effect
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: `${theme.palette.secondary.main} !important`, // Focused state
    },
  },
  '& .MuiCheckbox-root': {
    color: theme.palette.secondary.main, // Checkbox color
    '&.Mui-checked': {
      color: theme.palette.secondary.dark, // Checked state
    },
  },
}}


 

If the dialog uses portal, it is not rendered inside the datagrid. It is not children of a datagrid, you can’t access it like this & .MuiDataGrid-paper

Depending of the version of the mui you are using, there are props in datagrid that allow you to pass props to its inner components.

In version 7:

   slotProps={{
       columnMenu: {
         sx: {
          ...styles here
         }
      }
   }}

In version 5:

componentsProps={{
     columnMenu: {
        sx: {
           ...style here
        }
     }
}}

Your style has to be adapted to the real DOM. You won’t need & .MuiDataGrid-paper selector.