如何自定义 strapi Admin UI v4？答案

【问题标题】：How to custom strapi Admin UI v4?如何自定义 strapi Admin UI v4？
【发布时间】：2022-12-15 19:41:28
【问题描述】：

我试图更改管理页面的 HomeHeader，但没有任何变化。

我将管理文件夹复制到node_modules/@strapi/admin/admin 到 my-project/admin然后我修改了HomeHeader.js文件如下图：

我用命令yarn strapi develop --watch-admin 启动了 strapi，但没有任何反应

请帮我定制这个！谢谢

Strapi 版本：4.0.4
操作系统：MacOs
数据库：postgres节点
版本：v14.18.1
NPM 版本：6.14.15
纱线版本：1.22.10

【问题讨论】：

标签： strapi

【解决方案1】：

在 Strapi-v3 中，您可以自定义管理面板 UI，但在 v4 中则不能。 GitHub 上有一个 opened issue 关于这个问题。

【讨论】：

感谢您提供的信息，我几乎发疯了试图用自定义覆盖主页组件
你是否建议为此将 Strapi 的版本降级到 v3？

【解决方案2】：

我也遇到过一个客户的这个需求。

要替换或自定义 Strapi 管理仪表板主页，您可以使用 webpack 覆盖该文件。

使用基本的 React 组件代码在 src/admin/components/Home.tsx 中创建一个组件文件。

在文件 src/admin/webpack.config.js 上写这段代码来替换原来的主页。


module.exports = (config, webpack) => {
...
  /**
   * Overwrite the dashboard home Component
   */
  config.plugins.push(
    new webpack.NormalModuleReplacementPlugin(
      /.cache/admin/src/pages/HomePage/index.js/,
      path.resolve(__dirname, "components/Home.tsx")
    )
  );
....

  // Important: return the modified config
  return config;
};

然后重新构建你的应用程序。

【讨论】：