I would like to apply my own styles to markdown content within the info addon. I can style outermost container of markdown content by:
info: {
styles: () => {
infoContent: color: 'red'
},
}
But the markdown elements inside will still have a lot of inline-styles, which make them look completely incosistent with everything else.
How can I target specific markdown elements inside infoContent, or simply strip all styles?
Story source:
storiesOf('Shared/Organisms/Header', module).add(
'Simple',
() => (
<Header pushToRight={3}>
<Logo>Logo</Logo>
<Tagline>Danmarks bedste markedsplads</Tagline>
<div>|||</div>
</Header>
),
{
info: {
text: `
## Description
Simple header component.
- Basically a shell component, that has some styling and contains children components
- Has the ability to position children on the right by specifying nth-child in prop \`pushToRight\`.
`,
// styles: () => stylesheet,
},
}
)
Will result in:

I am using React, Typescript and Styled Components.
"@storybook/addon-a11y": "4.0.0-alpha.14",
"@storybook/addon-actions": "4.0.0-alpha.14",
"@storybook/addon-info": "4.0.0-alpha.14",
"@storybook/addon-links": "4.0.0-alpha.14",
"@storybook/addon-notes": "4.0.0-alpha.14",
"@storybook/addon-viewport": "4.0.0-alpha.14",
"@storybook/addons": "4.0.0-alpha.14",
"@storybook/react": "4.0.0-alpha.14",
"react": "^16.2.0",
"react-docgen-typescript-loader": "^2.1.1",
"react-dom": "^16.2.0",
"styled-components": "^3.3.0",
"ts-loader": "^4.3.1",
"tslint": "^5.9.1",
"typescript": "^2.9.1",
"webpack": "^4.11.1",
"webpack-cli": "^2.1.3"
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!
Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!
I also have this issue with storybook v4.0.9.. still.. Markdown looks awful. But it seems like it can be overwrite using !important style (but in this case another problem - lack of selectors and style importing).
Most helpful comment
I also have this issue with storybook v4.0.9.. still.. Markdown looks awful. But it seems like it can be overwrite using !important style (but in this case another problem - lack of selectors and style importing).