Gatsby 组件阴影答案

【问题标题】：Gatsby component shadowingGatsby 组件阴影
【发布时间】：2021-08-23 00:56:41
【问题描述】：

我正在使用 gatsby 启动器 gatsby-theme-carbon。它有一个切换器组件，其代码可用here。看起来像这样 Switcher screenshot.

如何使用组件阴影完全禁用切换器？（即我的网站上根本不需要切换器）。

提前感谢您的帮助。

【问题讨论】：

【解决方案1】：

正如您在Shadowing in Gatsby themes docs 中看到的：

此功能允许用户替换 src 目录中的文件包含在 webpack 包中，并带有自己的实现。这适用于 React 组件、src/pages 中的页面、JSON 文件、TypeScript 文件，以及您网站中的任何其他导入文件（例如 .css）。

阴影 API 使用确定性文件结构方法来了解应该或不应该呈现哪个组件。在您的情况下，您只需覆盖 CSS props 以将其显示为无，或者您只需遮蔽并返回一个空组件，因为遮蔽用于扩展 Gatsby 主题。在您的项目中创建一个src/gatsby-theme-blog/components/Switcher/Switcher.js 并执行以下操作：

const Switcher = () => {
  return <></>
};

【讨论】：

嘿@Ferran 成功了，但成功率为 98%。现在切换器的下拉菜单（98% 的切换器）消失了，但图标仍然存在。如果我可以通过遮蔽Layout.js 组件（呈现切换器本身的组件）来删除<Switcher />，我觉得可以删除该图标。但我该怎么做呢？非常感谢您的帮助。
我的意思是如何从Layout.js 中只删除<Switcher /> ？
方法是一样的。该图标应该在主题的Header 组件中，因此要隐藏它，您只需在项目的同一文件夹中创建一个Header.js，就像它在主题/src/gatsby-theme-blog/components/Header/Header.js 中一样（我猜）并自定义您的移除图标的组件（如果它不是标题，请对包含要移除的图标的组件应用相同的方法）