0

I am wondering if there is a neat trick to use a component classes prop to override some CSS defined in a theme's overrides.

For instance : If I want all Button components to have a different font-size than the default one. I can use the theme.overrides props to do so :

// this works, all Buttons text is 1.1rem
let theme = createMuiTheme({
  overrides: {
    MuiButton: {
      label: {
        "&": {fontSize: "1.1rem"}
      }
    }
  }
})

Now if for some reason one of my button needs to have a different font-size, I was hoping using classes prop would do the job :

const useClasses = makeStyles({
  smallerFontSize: {
    fontSize: "0.9rem"
  }
})
...
const classes = useClasses()
...
<Button 
  classes={{
    // unfortunately this doesn't work, theme overrides is taking precedence
    label: classes.smallerFontSize
  }}
>
  Some smaller text
</Button>
...

Since using classes prop allows us to target and override some component's CSS if default theme values have not been overridden, I find it confusing that theme overrides end up behaving somewhat differently and have a higher specificity than a one time rule.

I'd argue it kind of defeats the purpose of having a customisable theme.

But hopefully I'm missing something and your wisdom will help !

UPDATE

My mistake was to export the created theme and the makeStyles hook from the same module file.

Doing that made Mui insert theme <style> after the hook <style>. To fix the issue and be able to use classes component props as I wanted to :

  • export theme and hooks from separate modules
  • make sure theme module has no dependency on the module exporting the hook
  • make sure when using ThemeProvider that it has no parent component importing the hook

I still don't quite understand why things worked before I added the overrides property on the theme object though.

jorafali
  • 13
  • 4
  • Works fine for me: https://codesandbox.io/s/override-theme-overrides-wbe3p – Ryan Cogswell Feb 14 '20 at 17:57
  • Do you have your `makeStyles` call in a separate file such that you are importing the `useClasses` function? – Ryan Cogswell Feb 14 '20 at 18:04
  • @RyanCogswell: Yes I import my hook from a separate file. I have tried without importing and it works indeed ! I do not understand why this is different though ... And is there a way to define my hook in one place only and still be able to use it in other files ? – jorafali Feb 14 '20 at 18:18
  • Does this answer your question? [Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh](https://stackoverflow.com/questions/56929702/material-ui-v4-makestyles-exported-from-a-single-file-doesnt-retain-the-styles) – Ryan Cogswell Feb 14 '20 at 18:20
  • ... Yes, maybe ? My imports are ordered properly (completely accidentally ofc) and so I didn't really bump into the issue described. In fact, before I tried to override the theme, all was working as I'd expect. But there are plenty of leads for me to follow in your link. Thanks – jorafali Feb 14 '20 at 18:46
  • So just to answer my own questions : – jorafali Feb 17 '20 at 11:48
  • ... my issue was having createMuiTheme and makeStyles in the same file. makeStyles ended up inserting – jorafali Feb 17 '20 at 12:16

0 Answers0