React项目Posts页面文本异常过大问题求助（基于Brad Traversy的Udemy教程DevConnector项目）

Let's break down why your PostItem.js is showing oversized text while ProfileItem.js works as expected. I've compared both components and your CSS to spot the key differences:

Key Observations & Root Cause #

Looking at your code, the main issue is missing font-size styling for the .post container and its child elements, while the .profile component likely inherits or has explicit text sizing rules (even if you didn't include them in your provided CSS). Here's the breakdown:

1. Container Class Styling Gap
   Your ProfileItem uses the .profile.bg-light container, which probably has implicit or explicit text-sizing styles in your global CSS (like font-size or inherited properties from a parent). On the flip side, your .post class only defines layout, image, and date styles—no rules for heading or paragraph text sizes. This means the <h4> and <p> tags in PostItem are using browser defaults or larger global styles.

2. Text Element Differences

   • PostItem uses <h4> for the username, while ProfileItem uses <h2>—but since the Profile text looks normal, your global CSS must be overriding the default <h2> size to be smaller, while leaving <h4> at a larger default.
   • The post body uses <p className='my-1'>, but your my-1 class only handles margin, not font size.

Fixes to Try #

1. Add Explicit Text Styles to the .post CSS #

Update your Posts Page CSS to define font sizes for heading and paragraph elements inside posts:

/* Posts Page */
.post-form .post-form-header {
  background: var(--primary-color);
  padding: 0.5rem;
}
.post {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 2rem;
  align-items: center;
  /* Add base font size for the container */
  font-size: 1rem;
}
/* Style the username heading */
.post h4 {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}
/* Style the post body text */
.post p {
  font-size: 1rem;
  line-height: 1.6;
}
.post > div:first-child {
  text-align: center;
}
.post img {
  width: 100px;
}
.post .comment-count {
  background: var(--light-color);
  color: var(--primary-color);
  padding: 0.1rem 0.2rem;
  border-radius: 5px;
  font-size: 0.8rem;
}
.post .post-date {
  color: #aaa;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

2. Use Existing Utility Classes (If Available) #

If your project has global text utility classes (like text-sm, text-base), apply them directly to the elements in PostItem.js:

<a href='profile.html'>
  <h4 className='text-sm'>{name}</h4>
</a>
<p className='my-1 text-base'>{text}</p>

3. Debug with Browser DevTools #

To confirm the issue:

• Right-click the oversized text in your browser and select "Inspect"
• Check the Computed tab to see where the font size is coming from (browser default, global CSS, etc.)
• Compare this to the computed styles of the text in ProfileItem to spot the discrepancy

Bonus: Fix a Minor Functional Bug #

I noticed your like button is displaying comments.length instead of likes.length—easy typo to fix:

<button type='button' className='btn btn-light'>
  <i className='fas fa-thumbs-up'></i>
  <span> {likes.length > 0 && <span>{likes.length}</span>}</span>
</button>

内容的提问来源于stack exchange，提问作者Daniel