reactjs - 使用 Storybook 在 React 和纯 HTML/CSS 中显示 React 组件

Question

因此，如果我有一个使用样式组件的 React Button 组件，如下所示：

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;

是否可以在 Storybook 上显示这个组件以及它的 React 代码和 HTML/CSS 代码？（无需硬编码 HTML/CSS 代码）

我正在考虑使用 ReactrenderToString()将其转换为 HTML，并将样式化组件的字符串用于 CSS。不确定这是否可能？

标签： reactjsstorybook

Answer 1

是的，它是一个storybook插件，而不是一个 React API。

请参阅故事源插件。