Unable to provide CSS class on < Snackbar > directly

[BornaP]

Is there a way to override CSS on element directly?

[iamhosseindhv]

@BornaP Please edit this sandbox and apply what you're trying to achieve, then share the example url here.

[BornaP]

I'm trying to apply CSS class directly to <Snackbar /> element. One example of it would be changing elements position property from fixed to absolute (ie. I'm trying to position snackbars relative to container, not window).

I believe it can easily be solved with passing classesSnackbar or something similar to https://github.com/iamhosseindhv/notistack/blob/master/src/SnackbarItem/SnackbarItem.js#L53

What do you think? If it makes sense, I can make PR for it.

[iamhosseindhv]

@BornaP I believe you can do so using classes property of snackbar. see docs here

const styles = {
  snack: {
    position: 'absolute',
    height: 50,
    bottom: 70,
    left: 10,
    backgroundColor: 'red',
  },
};

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

export default withStyles(styles)(App)

link to SANDBOX EXAMPLE: https://codesandbox.io/s/j9k0063q5

[BornaP]

That's the issue. Classes root set's it to SnackbarItem, not Snackbar component. I need to position Snackbar's <div> relative to container. Root element of whole plugin therefore is not accessible with classes prop.

[iamhosseindhv]

I see @BornaP , classes.root in this line has to be renamed to avoid name collision with Snackbar classes.root prop.

And classes needs to get passed down to the Snackbar component.

[iamhosseindhv]

Fix commit: 2eaaa50

By upgrading to v0.3.7 @BornaP , you should by able to apply css classes to Snackbar root (in the same way in example above).

[iamhosseindhv]

Closed due to fix and/or inactivity. feel free to reopen.

[AndreKlenert]

The bottom css in root is useless as it is overwritten with inline style. Is there any way to set the bottom or top css without being overwritten? I need to set the top css parameter to a specific value...

[matsgm]

The bottom css in root is useless as it is overwritten with inline style. Is there any way to set the bottom or top css without being overwritten? I need to set the top css parameter to a specific value...

You can try to use marginBottom or marginTop, which might work if you only have one notification.

[matsgm]

I would like to reopen this issue. On devices with bottom navigation, I can´t seem to place the notification container above the bottom navigation, so I can use multiple notifications.

[KoenLav]

@matsgm and others, this is actually possible but undocumented:

<SnackbarProvider classes={{ containerRoot: classes.snackbarContainer }}>

[iamhosseindhv]

Documentation can be found here: https://iamhosseindhv.com/notistack/api#classes

[KoenLav]

@iamhosseindhv apologies, I missed containerRoot there.

I guess this issue can be closed then?

[iamhosseindhv]

Yeah maybe title of the issue is not applicable anymore.

The reason I have this issue open is that I'd like us all to have a way to dynamically change the position of snackbar container.

Say you're developing a web app with bottom navigation. Currently you can change bottom position of snackbar container. but not all of the pages have bottom navigation. You should have a way of toggling between different mode/positions as user navigates between different pages.

[iamhosseindhv]

As per comment above