Storybook: Inline styling of any html tag inside <Preview> throws error

Created on 15 Jul 2020  路  2Comments  路  Source: storybookjs/storybook

Describe the bug
Html written inside a Preview element (inside an MDX file) throws an error when trying to set inline-styling with style="".

To Reproduce
I am using lit-element storybook template by open-wc, not sure if you need further information?

Expected behavior
I expected that adding properties to html-tags would not break the storybook.

Code snippets
my file mystory.stories.mdx:

import { Story, Preview, Meta, Props, html } from '@open-wc/demoing-storybook';
import '../src/MyComponent.js';

<Meta
  title="atoms|MyComponent"
  parameters={{
    options: { selectedPanel: "storybookjs/knobs/panel" }
  }}
/>

# MyComponent
<Preview>
  <div style="background-color: black;">
    <my-component></my-component>
  </div>
</Preview>

Screenshots
Bildschirmfoto von 2020-07-15 18-15-21

System:

Environment Info:
  System:
    OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 78.0.1

mdx question / support

All 2 comments

Try style={{ backgroundColor: 'black' }} which is valid React?

Try style={{ backgroundColor: 'black' }} which is valid React?

Thanks a lot, this worked! I didnt work at all with react so wasn't aware of the syntax! Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ilyaulyanov picture ilyaulyanov  路  100Comments

enagy27 picture enagy27  路  69Comments

Gongreg picture Gongreg  路  58Comments

ilias-t picture ilias-t  路  73Comments

p3k picture p3k  路  61Comments