React+CSS如何为每个组件添加底部下划线？

要给每个Joke组件添加底部下划线来区分内容，你需要给Joke组件的根容器设置类名，再通过CSS定义样式即可，具体步骤如下：

1. 给Joke组件添加类名 #

修改你的Joke组件代码，给根元素加上自定义类名（比如joke-card）：

import React from "react"
// 引入对应的CSS文件
import "./Joke.css"

function Joke(props) {
  return (
    <div className="joke-card">
      <p>{props.jokes}</p>
      <p>{props.punchline}</p>
    </div>
  )
}

export default Joke

2. 编写CSS样式 #

在Joke.css文件中添加以下样式代码：

.joke-card {
  /* 设置底部下划线 */
  border-bottom: 1px solid #aaa;
  /* 添加上下内边距，让内容和边框更协调 */
  padding: 1.2rem 0;
  /* 可选：添加左右内边距优化排版 */
  padding-left: 0.8rem;
}

/* 可选：移除最后一个笑话的底部下划线，避免多余线条 */
.joke-card:last-child {
  border-bottom: none;
}

样式调整说明 #

• 你可以修改border-bottom的参数：比如把1px改成2px调整粗细，solid换成dashed改成虚线，#aaa换成其他颜色值匹配你的页面风格。
• padding属性是为了让内容和边框保持合适距离，避免排版拥挤，可根据需求调整数值。

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