themed "classes" prop is ignored #12013

@vsarang I can confirm the behavior you are experiencing. This can easily be fixed by using mergeClasses(). I wish we had a performance benchmark #4305 to see the implications. Still, I think that it should be fine given the early return here: https://github.com/mui-org/material-ui/blob/373d1ead1e0a0c9f0089911ced837e497e0740b2/packages/material-ui/src/styles/mergeClasses.js#L7-L8

I'm not 💯% convinced we should be supporting this use case. I don't want to harm the many for a narrow edge case. I think that the best path going forward is to wait for more people asking this feature. See what the use cases are.

I'm using react-admin and trying to style the checkboxes within their provided Datagrid. I don't want to reimplement the entire Datagrid, but they have not exposed the ability to pass props into the MuiCheckbox within it, so I must style it via theming. I need to target the svg within the MuiCheckbox with my styles, so I must set the classname.

@vsarang Ok, I have made up my mind. I think that we should warn about this problem, and point people toward the dangerouslyUseGlobalCSS feature. It should solve your problem. Can you confirm?

@issuehuntfest has funded $40.00 to this issue. See it on IssueHunt

I'd like to see the behavior implemented as requested. I'm working on theme-ing MUI components within a create-react-app application.

I have an external dependency on a SASS package, which is used within my CSS modules. The easiest way for me to style, for example, all disabled input underlines, is to apply relevant SASS mixin via my stylesheets.

This deficiency is forcing me to hard code my values in the overrides property of the createMuiTheme object argument. This splits a bit of my logic, and it's frustrating to have to search the docs and source code for how to override specific pieces of the component.

Example of my current implementation:

import muiDialog from './muiDialog.module.scss';

export const muiTheme = createMuiTheme({
  overrides: {
    MuiInput: {
      disabled: {
        // https://github.com/mui-org/material-ui/issues/12192
        '&&&&::before': {
          borderBottomStyle: 'solid',
        },
      },
    }
  },
  // ...
  props: {
    MuiDialogActions: {
      className: muiDialog.dialogActions,
    },
    MuiDialogContent: {
      className: muiDialog.dialogComponentMargins,
    },
    // ...
  } 
}

@dmart914 Thank you for raising your voice. I'm working on #15140 to better solve your problem. Would it help?

@oliviertassinari Thank you for your work and attention!

I think #15140 would do a lot for helping global theme overrides. With global class names as the default, I should be able to create and import stylesheets that override MUI components based on their deterministic class names. This would allow me to use non-module SASS files, perhaps implementing overrides for each components in separate files and importing them all through a single root level SASS file. That would be much more maintainable.

I don't really have any concern about name collisions with my application, as it appears MUI global class names are close to BEM, and we use CSS modules for 90% of our work anyway.

Thanks for bringing that PR for my attention. I'll follow it and watch for it to be merged.

Thank you for the feedback. I hope we can land the change in v4.0.0-beta.0.