Images gets extra height when displayed in storybook

[kjetilge]

Just discovered that I get extra height on images when they are displayed in story book:
I have:

        <div style={{display: 'flex'}}>

          <div style={{paddingRight:10}}>
              {imageBlob ?
                <div id="avatar_picture">
                  <img width={100} id="avatar_picture" src={imageBlob.url} />
                </div> : <div id="avatar_picture" style={{border:'1px solid'}}>
                  <img width={100} src='/images/avatar.png' />
                </div>
              }
          </div>
         //.......

      </div>

With the above code I get a an open space under my avatar picture when shown in storybook, but it looks ok in normal browser view. It seems the height of the image is 95px in storybook and 91 in normal browser view. If I add a style with display:block like this:

<img width={100} style={{display:'block'}} src='/images/avatar.png' />

Then it looks fine in both views. I belive this must be a bug.

[kjetilge]

I found out what was wrong. I have a css file that is automatically loaded in my meteor app and this file is not loaded by it self in storybook. Fixed the problem by adding:

import '/client/styles/mui.css'

in my_module/components/.stories/index.js file

[arunoda]

Great.