Reactjs 使用故事书在React&；中显示React组件；纯HTML/CSS

因此，如果我有一个React按钮组件，它使用样式化组件，如下所示：

import styled, { css } from "styled-components";
import React from "react";

const Button = ({ theme, children }) => {
  const StyledButton = styled.a`
    padding: 10px 20px;
    border-radius: 20px;
    ${theme === "primary" &&
    css`
      color: black;
      background: white;
    `}
    ${theme === "secondary" &&
    css`
      color: white;
      background: black;
    `}
  `;

  return <StyledButton>{children}</StyledButton>;
};

export default Button;

import styled，{css}来自“styled components”；
从“React”导入React；
常量按钮=（{主题，子对象}）=>{
const StyledButton=styled.a`
填充：10px 20px；
边界半径：20px；
${theme==“primary”&&
css`
颜色：黑色；
背景：白色；
`}
${theme==“secondary”&&
css`
颜色：白色；
背景：黑色；
`}
`;
返回{children}；
};
导出默认按钮；

是否可以在故事书上显示该组件及其React代码&HTML/CSS代码？（无需硬编码HTML/CSS代码）

我正在考虑使用React的

renderToString（）

将其转换为HTML，并使用样式化组件的字符串作为CSS。不确定这是否可行？

是的，它是一个，而不是一个React API

看

---

是否可以同时显示React组件和纯HTML（非JSX）源代码。使用插件，我也可以为按钮生成纯HTML源代码。