Add SnackbarContainer containerRoot class (#263)

* Add SnackbarContainer root class

* Update CHANGELOG

* Minor

CHANGELOG.md

@@ -8,6 +8,7 @@ Thanks to all contributers who improved notistack by opening an issue/PR.
 * **@iinitz**: Enforce white text for dark theme [#241](https://github.com/iamhosseindhv/notistack/pull/241)
 * **@fbarbare**: Let Mat UI handle the font and border-radius [#262](https://github.com/iamhosseindhv/notistack/pull/262)
 * **@tomohiro-iwana @JuanmaMenendez**: Fix bug with snackbar not being centered on `xs` screens [#232](https://github.com/iamhosseindhv/notistack/issues/232)
+* Add new `containerRoot` class to `SnackbarContainer` [#263](https://github.com/iamhosseindhv/notistack/pull/263)
 
 <br />
 

src/SnackbarProvider.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { createPortal } from 'react-dom';
+import clsx from 'clsx';
 import SnackbarContext from './SnackbarContext';
 import { MESSAGES, REASONS, originKeyExtractor, omitContainerKeys } from './utils/constants';
 import SnackbarItem from './SnackbarItem';
@@ -278,7 +279,10 @@ class SnackbarProvider extends Component<SnackbarProviderProps, State> {
                 key={origin}
                 dense={dense}
                 anchorOrigin={snacks[0].anchorOrigin}
-                className={classes[`containerAnchorOrigin${origin}` as ContainerClassKey]}
+                className={clsx(
+                    classes.containerRoot,
+                    classes[`containerAnchorOrigin${origin}` as ContainerClassKey],
+                )}
             >
                 {snacks.map(snack => (
                     <SnackbarItem

src/index.d.ts

@@ -29,6 +29,7 @@ export type TransitionEnterHandler = (node: HTMLElement, isAppearing: boolean, k
 export type TransitionHandler = (node: HTMLElement, key: SnackbarKey) => void;
 
 export type ContainerClassKey =
+    | 'containerRoot'
     | 'containerAnchorOriginTopCenter'
     | 'containerAnchorOriginBottomCenter'
     | 'containerAnchorOriginTopRight'

src/utils/constants.ts

@@ -17,6 +17,7 @@ export const allClasses: {
         anchorOriginBottomLeft: {},
     },
     container: {
+        containerRoot: {},
         containerAnchorOriginTopCenter: {},
         containerAnchorOriginBottomCenter: {},
         containerAnchorOriginTopRight: {},
@@ -44,7 +45,7 @@ export const originKeyExtractor = (anchor: Snack['anchorOrigin']): string => (
 /**
  * Omit SnackbarContainer class keys that are not needed for SnackbarItem
  */
-export const omitContainerKeys = (classes: SnackbarProviderProps['classes'] = {}): SnackbarItemProps['classes'] => (
+export const omitContainerKeys = (classes: SnackbarProviderProps['classes']): SnackbarItemProps['classes'] => (
     // @ts-ignore
     Object.keys(classes).filter(key => !allClasses.container[key]).reduce((obj, key) => ({ ...obj, [key]: classes[key] }), {})
 );