GraphQL Playground 是一个开源的，强大的 GraphQL IDE，它可以让我们轻松地浏览和交互我们的 GraphQL API。但是，有时候我们可能需要自定义它的样式，以满足我们的设计需求。在本文中，我们将探讨如何替换掉 GraphQL Playground 中的样式文件，以实现样式自定义。
步骤
第一步，下载 GraphQL Playground 样式文件
我们需要下载 GraphQL Playground 的样式文件，它们在 npm 包里存储。输入以下命令行：
npm i graphql-playground-react
第二步，创建自定义的样式文件
我们需要创建一个新的 CSS 文件，来覆盖（或更改） GraphQL Playground 的默认样式。在这里，我们可以定义自己的颜色、字体、排版等样式。
-- -------------------- ---- ------- -- ---------- -- ------- - ----------------- ----- ------ ----- - ------- ----------------- ------- ------------------ - ----------------- ----- ------ ----- -
第三步，使用自定义样式文件
在启动 GraphQL Playground 时，需要指定自定义样式文件。输入以下命令行：
import { Playground } from 'graphql-playground-react';
import './custom.css';
const CustomPlayground = () => (
<Playground endpoint="/graphql" />
);这样，当我们启动 CustomPlayground 组件时，它将使用我们指定的样式。
示例代码
接下来，我们来看一下如何使用步骤中所述的代码。在这个示例中，我们将重写 GraphQL Playground 中的两个元素的背景颜色，分别是 .docExplorerWrap 和 .introspectionWrap。
custom.css
-- -------------------- ---- ------- -- ---------- -- ------- - ----------------- ----- ------ ----- - ------- ----------------- ------- ------------------ - ----------------- ----- ------ ----- -
index.js
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ---------- - ---- --------------------------- ------ --------------- ----- ---------------- - -- -- - ----------- ------------------- -- -- --------------------------------- --- ---------------------------------
在这个例子中，我们使用 Playground 组件并通过 endpoint 属性指定了我们graphql Endpoint的url。 我们还在 CustomPlayground 组件中引用了 custom.css 文件。
现在，当你打开你的应用程序时，你应该可以看到您已经应用了自定义样式。
总结
在本文中，我们介绍了如何替换掉 GraphQL Playground 中的默认样式文件，并吧一个自定义的 CSS 文件应用到 GraphQL Playground 中。使用这些方法，我们可以自定义 GraphQL Playground 的外观和感觉，以适应我们的应用程序的需要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e03bb4f6b2d6eab3b4f96b