代码之家 › 专栏 › 技术社区 › RaphaMex

如何在reactjs中一致地使用带有组件的网格布局

grid-layout reactjs javascript

RaphaMex · 技术社区 · 7 年前

我正在开发一个web应用程序,我想使用CSS网格布局。几个小时后,我发现我的大部分布局都不正确,因为 style 被较低的组件覆盖,丢失 gridArea . 我只是很幸运到目前为止一切都很顺利。

网格区

<div style={{ ...props.style, ...styles.ThisComponent }}>
  my item content...
</div>

正确的做法是什么?有什么陷阱吗?

我正在重写我的所有组件,请节省我很多努力!

2 回复 | 直到 7 年前

S.Haviv 7 年前

只有最新的浏览器才支持CSS网格。你不喜欢使用材料界面的网格布局吗?然后你可以调整一切。这是一个 link 如果你这样做了,还有一个CSS网格布局的例子。

Dhananjai Pai 7 年前

你试过在 styled-components 然后把你的组件代码放进去?如果所有的外部因素 div s应该有同样的风格?语法可能与您所写的有所不同,但似乎更易于维护*

*可能固执己见

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前