Storybook: apply global css to storybook

[doroncy]

Custom style

Steps to reproduce

I would like to apply my own style for the notes addon panel, i would like to appy some css in order to make the notes code markdown looks like GitHub markdown for example.
when i import style from the strorybook config file it is injected into the main iframe and i do not have access to override the addons pane dom.
please advice if there is a correct way to inject global style to storybook

I use: storybook/angular version 4.0.0-alpha.24

• @storybook/angular version 4.0.0-alpha.24
• @storybook/addon-notes 4.0.0-alpha.24

[igor-dv]

Can you include these CSS rules into the manager-head.html hook?

[ndelangen]

We'll be expanding the theming support slowly, this is coming.

Right now as @igor-dv says you can add global stylesheets to the manager. Long term we're going to embed this this into themes.

[doroncy]

thanks @igor-dv , adding style to the manager-head.html worked.
I used it to apply a better markdown style for the notes addon, it would be cool if the notes addon style applied Github markdown css by default.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[metamn]

Just a quick add. This is how your manager-head.html has to look like to style your markdown:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function(){
        var iframe = document.getElementById('storybook-preview-iframe');
        iframe.onload = function() {
            var style = document.createElement('style');
            style.textContent =
              '#root div:nth-child(2) div div > *, #root div:nth-child(2) div div > * > * {' +
              '  font-family: monospace !important;' +
              '  font-size: 18px !important;' +
              '}' +
              '#root div:nth-child(2) div div h1, #root div:nth-child(2) div div h2, #root div:nth-child(2) div div h3, #root div:nth-child(2) div div h4{' +
              '  text-transform: none !important;' +
              '  padding: 0 !important;' +
              '  margin: 18px 0 !important;' +
              '}'           ;
            iframe.contentDocument.head.appendChild(style);
        }
    }, false);
</script>