介绍
在前端开发过程中，调试样式对于快速开发和改进产品的质量非常重要。Playroom 是一个通过交互式方式制作 React UI 组件的工具。使用 Playroom，您可以创建并调整您的 React 组件，并快速预览样式更改。
安装
可以使用 npm 或 yarn 安装 playroom。
npm install -g playroom
yarn global add playroom
开始使用
在你的 React 应用中，创建一个 playroom.config.js 文件，在这个文件中提供一组组件，这些组件将能够在 Playroom 中使用。以下是一个 Playroom 配置文件的例子：
module.exports = {
components: "./src/components/**/*.{js,jsx,ts,tsx}",
outputPath: "./dist/playroom",
title: "Playroom",
};创建一个新的目录，将此文件与您想要查看和编辑的组件放在此目录下，并在命令行中运行以下命令：
playroom
Playroom 将开启一个 Web 服务器，并且您访问 localhost:9000 即可使用 Playroom。
在 Playroom 中使用组件
在 Playroom 中可以使用任何在 playroom.config.js 文件中提供的组件。在左侧窗格中选择一个组件，然后它将被呈现在主窗口中。您可以调整组件的 props 和样式，以在实时应用程序中查看更改。
Playroom 还允许您在您正在开发的应用程序中使用样式属性。要将样式应用到您的组件中，请使用 css 函数。
-- -------------------- ---- -------
------ - --- - ---- --------------------
----- ------ - --------------
-------- ---- -----
----------------- --------
------- -----
-------------- -----
------ --------
---- ------- - ---- -- --
------- --
----
----------------- --------
--
--<Button primary>Click me!</Button>
此代码将呈现一个具有默认样式的按钮。当您在 Playroom 中使用此组件时，您可以更改 primary 属性以更改按钮的背景色。
总结
Playroom 是一个非常有用的工具，它可以帮助我们快速有效地开发 React UI 组件，并快速预览样式更改。无论是初学者还是资深开发者都可以从这个工具中受益。安装和使用都非常简单，因此建议所有前端工程师都尝试一下并在开发过程中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4087dedbf7be33b2567214