CSS in header.css causes incorrect rendering of component

[mwilliamson]

Describe the bug

I'm using Chakra UI to render a menu. Each MenuItem component is rendered as a button element. In a menu of two items, the second item is misaligned since it's given a left margin by the CSS rule:

button + button {
    margin-left: 10px;
}

from header.css, which appears to come from Storybook. Is there a way to avoid this CSS being included? Apologies if I've misunderstood something!

Actual:

Expected:

To Reproduce

Steps to reproduce the behavior:

1. Create a fresh React application using Create React App: npx create-react-app app; cd app

2. Install Chakra UI: npm install @chakra-ui/react framer-motion @emotion/react @emotion/styled

3. Install Storybook: npx sb init

4. Fix Chakra UI / Storybook integration by updating .storybook/main.js:

   const path = require("path");
   
   const toPath = (_path) => path.join(process.cwd(), _path);
   
   module.exports = {
     "stories": [
       "../src/**/*.stories.mdx",
       "../src/**/*.stories.@(js|jsx|ts|tsx)"
     ],
     "addons": [
       "@storybook/addon-links",
       "@storybook/addon-essentials",
       "@storybook/preset-create-react-app"
     ],
     webpackFinal: async (config) => {
       return {
         ...config,
         resolve: {
   	...config.resolve,
   	alias: {
   	  ...config.resolve.alias,
   	  "@emotion/core": toPath("node_modules/@emotion/react"),
   	  "emotion-theming": toPath("node_modules/@emotion/react"),
   	},
         },
       }
     },
   }
   
   

5. Create a story with a menu:

   import React from "react";
   
   import { Button, ChakraProvider, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
   
   function ExampleMenu() {
       return (
   	<ChakraProvider>
   	    <Menu>
   	        <MenuButton as={Button}>
   	            Actions
   	        </MenuButton>
   	        <MenuList>
   	            <MenuItem>Download</MenuItem>
   	            <MenuItem>Create a Copy</MenuItem>
   	            <MenuItem>Mark as Draft</MenuItem>
   	            <MenuItem>Delete</MenuItem>
   	            <MenuItem>Attend a Workshop</MenuItem>
   	        </MenuList>
   	    </Menu>
   	</ChakraProvider>
       );
   }
   
   export default {
       title: "ExampleMenu",
       component: ExampleMenu,
   };
   
   export const BrokenMenu = () => (
       <ExampleMenu />
   );
   
   

Expected behavior

Buttons are correctly aligned.

System

Environment Info:

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
  Binaries:
    Node: 12.18.3 - ~/bin/node
    Yarn: 1.22.4 - ~/bin/yarn
    npm: 6.14.6 - ~/bin/npm
  Browsers:
    Chrome: 89.0.4389.72
    Firefox: 86.0
  npmPackages:
    @storybook/addon-actions: ^6.1.21 => 6.1.21 
    @storybook/addon-essentials: ^6.1.21 => 6.1.21 
    @storybook/addon-links: ^6.1.21 => 6.1.21 
    @storybook/node-logger: ^6.1.21 => 6.1.21 
    @storybook/preset-create-react-app: ^3.1.6 => 3.1.6 
    @storybook/react: ^6.1.21 => 6.1.21 

[shilman]

Did you try setting the layout parameter to fullscreen?

https://storybook.js.org/docs/react/configure/story-layout#gatsby-focus-wrapper

[mwilliamson]

Thanks for the suggestion. I've just tried that, and I get the same problem:

Expected:

[shilman]

@ghengeveld @ndelangen is this something you can help with?

[ndelangen]

Just delete header.css, it's just to help people get started, it's not required to keep.

[davidpfahler]

@ndelangen Thanks! I didn't realize the examples could mess with the rest of the components / styles, but makes sense.