Is there a way to customize font-size and line-height?

[ghost]

Hi @iamhosseindhv!

Great job! I use notistack quite often but I have a question. How can I customize font-size and line-height properties on SnackbarItem component? It seems like they are hardcoded: https://github.com/iamhosseindhv/notistack/blob/master/src/SnackbarItem/SnackbarItem.styles.js#L10

Thanks in advance!

[iamhosseindhv]

@czelusniakdawid You can do so by overriding classes. see material-ui docs for more info.

example: https://codesandbox.io/s/3qr4owqnmq

const styles = {
  base: {
    fontSize: 33,
  },
};

const App = ({ classes }) => (
    <SnackbarProvider
      maxSnack={3}
      classes={{
        base: classes.base,
      }}
    >
        <MessageButtons />
    </SnackbarProvider>
);

[elitan]

Is there a way to do this on the SnackbarProvider-component directly?

Something like:

    <SnackbarProvider
      maxSnack={3}
      classes={{
        base: { fontSize: 33 }
      }}
    >

[iamhosseindhv]

@elitan Classes prop only accepts string values (i.e. name of the class) and not objects.

[elitan]

@elitan Classes prop only accepts string values (i.e. name of the class) and not objects.

I am not sure how that relates to my question.

[iamhosseindhv]

Meaning that value for the key base (in your example), must be a string, while you are passing an object.

<SnackbarProvider
      maxSnack={3}
      classes={{
        base: { fontSize: 33 } // <-- object ❌
        base: 'name-of-the-class' // <-- string ✅
      }}
    >

code example: https://codesandbox.io/s/2014qr4vvn