@storybook/addon-controls 定义为 nowrap 的多行代码空格

Question

如何将多行代码部分放入故事书控件描述列 (argTypes.ARG_NAME.description)？

它覆盖了描述单元格内代码的 whitespace 到 nowrap，并且 css 看起来像

.css-1521b8c code {
    line-height: 1;
    margin: 0 2px;
    padding: 3px 5px;
    white-space: nowrap;
    border-radius: 3px;
    font-size: 13px;
    border: 1px solid #EEEEEE;
    color: rgba(51,51,51,0.9);
    background-color: #F8F8F8;
}

这里有一些设置/选项吗？或者我如何覆盖这个 css?

先谢谢了。

Answer 1

用一些 <style /> 部分创建 ./storybook/manager-head.html

类似

<style>
  pre code {
    whitespace: pre !important; // or use selector inheritance instead of !important
  }
</style>

@storybook/addon-controls 定义为 nowrap 的多行代码空格

@storybook/addon-controls multiline code whitespace defined as nowrap

storybook