alexplumb / material-ui-banner Goto Github PK

I'm getting the following exception with a plain install:

(anonymous function)
node_modules/material-ui-banner/dist/index.js:192
  189 |   marginLeft: "auto",
  190 |   marginRight: "auto"
  191 | },
> 192 | appBar: O({}, e.breakpoints.up("md"), {
      | ^  193 |   width: 1100,
  194 |   marginLeft: "auto",
  195 |   marginRight: "auto",
View compiled
create
node_modules/@material-ui/styles/esm/getStylesCreator/getStylesCreator.js:20
  17 | var styles;
  18 | 
  19 | try {
> 20 |   styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;

Looks like it's not finding the theme? I'll continue to investigate.

Extra space is taken up by the banner when no buttons are available inside the banner.
Please consider making the render of the CardActions within the banner conditional for instances where no buttons are displayed, even if it is against the Material Design standards.

It's currently impossible to set an onClose handler when using the static banner. I created a PR here that adds cardProps, paperProps, and onClose: #13.

Using this in a React+TypeScript project, I get

error TS7016: Could not find a declaration file for module 'material-ui-banner'. 'node_modules/material-ui-banner/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/material-ui-banner` if it exists or add a new declaration (.d.ts) file containing `declare module 'material-ui-banner';`

Buttons within the banner flow off the edge of the page when the screen size ie between 960px and 1100px wide as the width of the banner is set to 1100px.

Adding a maximum width of 100% to the container should resolve the issue.

appBar: {
[theme.breakpoints.up('md')]: {
width: 1100,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '100%',
},
},

An object containing additional classNames to be applied to the various components of the panel can be passed through to the banner component to enable additional styling. Adding this to the docs would be helpful for people looking to implement this component.

This component cannot be used with NextJS.

Expected Behavior: A simple page should build and render.

Actual Behavior: A ReferenceError: window is not defined is thrown.

CodeSandbox for Minimal Example: https://codesandbox.io/s/nextjs-banner-test-vr6pt?file=/pages/index.js

Notes: I could not locate any code in the repository which uses window directly. It may be used by some module that this component calls.

Version Info:

React v16.13.0
NextJS v9.3.0
material-ui-banner v1.4.3

Ideally the relevant import statement would also be in the README file.