主页 / user-12288097

leosole's questions

Martin Hope
leosole
Asked: 2025-02-12 01:08:19 +0800 CST
  • 7

背景：我正在构建一些库来帮助我构建带有微前端的门户。我有一个 UI 库（带有 UI 组件）、一个 Commons 库（使用 UI，具有所有微前端的共享组件）、一个渲染器库（使用 UI，用于渲染 strapi 数据）。它们都使用 tailwind css。

问题：当我使用公共库中接受子组件的组件时，用作子组件的组件的断点不起作用。如果我在公共组件之外使用相同的组件，断点就会起作用。例如：

<CommonsComponent>
  <ComponentWithBreakpoint /> // breakpoints do not work
</CommonsComponent>

<ComponentWithBreakpoint /> // breakpoints work

查看开发工具，我可以看到未应用断点的类（来自layout.css的lg：flex-row）：

在此处输入图片描述

flex-col 类也来自不同的文件（page.css）

这些组件包括：

const CommonsComponent = ({children}: {children: React.ReactNode}) => {
return (<div className="flex flex-col gap-4 w-full lg:w-[70%]">
  {children}
</div>)
} //from the commons library

const ComponentWithBreakpoint = () => {
return (
<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-2 w-full">
  //content
</div>
)} // from one of the microfrontends
reactjs