Styling a container using React styled components

First, a cry for help. Have you ever tried using the same code in two similar projects and were confounded when one worked and one didn’t? If not, I hope you sleep well at nights. If you have been stumped by some coding ghost and either solved it or didn’t, let me know about your experience.

What’s the story — why do I have near duplicate code in two projects? Is that cheating? Am I learning? Answering backwards, yes I am definitely learning. The review is invaluable. So many developers I’ve spoken to emphasize the importance of building projects to deepen learning. I’ve found that it helps keep my thinking active if I create a new project to review concepts I’ve already learned. In this particular case, there was an actual need to create two e-commerce projects. I created one page for my husband’s business, Baris Collection, and one for my art prints business-in-development, Sirat. Both have been personal and exciting. And both have had their obstacles.

Currently, I’m trying to iterate over some items in an array to display their information. While I was waiting for my husband to provide some pics of his inventory, I started building out that container in my page.

The problem: I can’t display an array of objects in Sirat but I can in Baris Collection even though the code is identical as far as I can detect. I will continue to comb through the code to look for discrepancies. For now, I’ve successfully displayed my art objects in my husband’s page and I have to say, it looks really good there. I’m excited about the results and might keep my prints on his site to sell there.

Now about the CSS

Well, before the css, this is how I rendered the array in my CategoryItem functional component. First, I iterate over the array of items in my Categories component and style each container using styled components code (inside styled.div).

Then, inside CategoryItem, I access each item and display the image, the title, and a button.

To get images with superimposed text, I used styled components again.

I used absolute positioning for the information in order to display it on each item, instead of, let’s say, on a fixed place on the viewport. I’m still learning about the other types of positions but static is the default position, which would render the info after (under) the image, in accordance to the order within the render code.

The flex-direction: column css renders the description and button vertical instead of next to each other. Aligning the items in the center tells the app to “pack items around the center.” It refers to horizontal alignment. This is what it looks like with the default alignment:

And with center alignment:

I center-justified to center it vertically.

Other css tidbits

I set the title to white.

I set the background color of the button to white and the text to gray. The cursor (auto) is a small arrow by default. I set it to pointer to get a nifty little gloved hand with the pointer finger pointing to the button.

CSS within styled components is definitely simpler than having separate css pages, which I explored in my portfolio. I feel both are useful — the former for simpler projects and the latter for larger ones that require more complex css.

Do you prefer separating your css or including it using styled components?