Javascript 渲染组件预览

今天，我遇到了以下问题：我有一个表单来设置组件的标题、背景颜色、按钮背景和文本颜色等，我想在用户更改设置时呈现该组件的预览

问题是，我想渲染组件的“预览”，假设在窗体旁边的一个小视口中（或像缩小一样），这样用户可以在更改组件样式时预览组件。 文本的可读性并不重要，我想做的唯一一件事就是让用户知道，一旦他保存了新的设置，组件将如何更改

这就是表单，我想在表单旁边呈现一个组件的预览（放大）

有什么想法吗

---

谢谢。

为什么不使用css变换比例

大致如此

const Test = styled.div`
  ${props => props.preview && `
    transform: scale(0.5);
  `};
`;

---

不确定您是否正在尝试自己构建此功能，并简单地找到一些有助于此功能的东西，但react故事书可能值得一看