Width Customization

[DamodarSojka]

Hello,

Customization of the actual message component is working really well. However customizing the container (.notistack-Snackbar), specifically the width, doesn't seem to be possible.

The only way to change the width and the min-width that I have found was to use the classes prop and then use .notistack-Snackbar selector, this however results in buggy or invalid behaviour.

What's the correct way to customize the width? For example to have the width be equal to the length of the message for small messages?

Thank you

Tech	Version
Notistack	3.0.1
React	18.2
Browser	chrome

[nathanforce]

The only way to change the width and the min-width that I have found was to use the classes prop and then use .notistack-Snackbar selector, this however results in buggy or invalid behaviour.

Hey I managed to customize the width by passing a classes.root. In my case this was to unset the min-width:

      classes={{
        root: 'min-w-[auto]',
      }}

https://github.com/iamhosseindhv/notistack/blob/a61155adc85443f01dfc8818b6b6653edbd83288/src/SnackbarItem/SnackbarItem.tsx#L119

Hope that helps!

[stevenbriscoeca]

The only way to change the width and the min-width that I have found was to use the classes prop and then use .notistack-Snackbar selector, this however results in buggy or invalid behaviour.

Hey I managed to customize the width by passing a classes.root. In my case this was to unset the min-width:

      classes={{
        root: 'min-w-[auto]',
      }}

https://github.com/iamhosseindhv/notistack/blob/a61155adc85443f01dfc8818b6b6653edbd83288/src/SnackbarItem/SnackbarItem.tsx#L119

Hope that helps!

This only works if you're using tailwind in your project...did anyone found a solution?

[stevenbriscoeca]

it's because notistack adds a min-width 288px to their css

and if you have a custom component which is small, it doesnt work well, it will be offset if the custom component is smaller than 288

[stevenbriscoeca]

ok actually I figured it out :

just add a custom class like @nathanforce mentioned :

  return (
    <>
      <style>{`
          .overwrite-root-notistack {
            min-width: auto;
          }
        `}</style>

      <SnackbarProvider
        anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
        classes={{
          root: 'overwrite-root-notistack',
        }}
        Components={{
          default: CustomSnackbarContent,
          success: CustomSnackbarContent,
          info: CustomSnackbarContent,
          warning: CustomSnackbarContent,
          error: CustomSnackbarContent,
        }}
        {...props}
      />
    </>
  );

I just added a style tag, but you can create a CSS file and import it

import './notistack.css'; at the top of the react component

in the css file :

          .overwrite-root-notistack {
            min-width: auto;
          }

this issue can probably closed even though I wish there was a better way to do like having styles and passing styles on the root directly

I would also say adding a min-width 288 makes me pause....I don;t think every design needs this especially if the component is smaller.