使用 React 样式的组件设置容器样式

首先，呼救声。您是否曾经尝试在两个类似的项目中使用相同的代码，并且在一个工作而一个没有工作时感到困惑？如果没有，我希望你晚上睡个好觉。如果你 有 被一些编码鬼难住了，要么解决了，要么没有，让我知道你的经历。

这是什么故事——为什么我在两个项目中有几乎重复的代码？这是作弊吗？我在学习吗？向后回答，是的，我肯定在学习。审查是无价的。与我交谈过的许多开发人员都强调了构建项目以加深学习的重要性。我发现如果我创建一个新项目来复习我已经学过的概念，这有助于保持我的思维活跃。在这种特殊情况下，实际需要创建两个电子商务项目。我为我丈夫的生意创建了一个页面， 巴里斯系列 ，还有一张用于我正在开发的艺术版画业务， 西拉特 .两者都是个人的和令人兴奋的。两者都有自己的障碍。

目前，我正在尝试遍历数组中的某些项目以显示它们的信息。当我在等待我丈夫提供一些他的库存照片时，我开始在我的页面中构建那个容器。

问题：我无法在 Sirat 中显示对象数组，但我可以在 Baris Collection 中显示，尽管就我可以检测到的代码相同。我将继续梳理代码以查找差异。现在，我已经成功地在我丈夫的页面上展示了我的艺术品，我不得不说，那里看起来真的很好。我对结果很兴奋，可能会在他的网站上保留我的印刷品以便在那里出售。

现在关于 CSS

好吧，在 css 之前，这就是我在 CategoryItem 功能组件中呈现数组的方式。首先，我遍历我的 Categories 组件中的项目数组，并使用样式化组件代码（在 styled.div 中）设置每个容器的样式。

然后，在 CategoryItem 中，我访问每个项目并显示图像、标题和按钮。

为了获得带有叠加文本的图像，我再次使用了样式化组件。

我用绝对 定位 获取信息，以便在每个项目上显示它，而不是在视口上的固定位置。我仍在学习其他类型的位置，但静态是默认位置，它将根据渲染代码中的顺序在图像之后（下）渲染信息。

flex-direction: 列 css 呈现描述和按钮垂直而不是彼此相邻。 对齐项目 在中心告诉应用程序“围绕中心打包物品”。它指的是水平对齐。这是默认对齐方式的样子：

并与中心对齐：

我居中对齐以使其垂直居中。

其他 css 花絮

我将标题设置为白色。

我将按钮的背景颜色设置为白色，将文本设置为灰色。这 光标 (auto) 默认是一个小箭头。我将它设置为指针，以获得一个漂亮的戴手套的小手，指针指向按钮。

样式化组件中的 CSS 绝对比拥有单独的 CSS 页面更简单，我在我的 文件夹 .我觉得两者都很有用——前者适用于更简单的项目，后者适用于需要更复杂 CSS 的大型项目。

你喜欢分离你的 css 还是使用样式化的组件来包含它？

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18544/15250609