React中使用styled-components如何设置FormTitle样式实现组件换行

DevOps 小满

2026-9-3

React + styled-components 实现FormTitle与FormDescription分行方案

核心修改逻辑

两个元素无法分行的核心原因是默认/继承的布局属性没有占满整行，只要给两个组件都加上块级布局规则，就能实现各自独占一行的效果。

具体代码修改

调整FormTitle的样式定义，强制块级显示，同时匹配标题的视觉样式：

const FormTitle = styled.h2`
  display: block;
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0 0 8px 0;
`

调整FormDescription的样式，同样设置块级显示，和标题拉开间距：

const FormDescription = styled.p`
  display: block;
  width: 100%;
  font-size: 14px;
  color: #4e5969;
  margin: 0 0 24px 0;
`

如果外层表单容器用了flex布局，记得给容器加换行属性，避免子元素被强制压在同一行：

const FormWrapper = styled.form`
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 24px;
`

最终使用写法

直接按顺序把两个组件放到表单容器里即可，不需要额外加换行标签：

export default function App() {
  return (
    <FormWrapper>
      <FormTitle>用户信息登记</FormTitle>
      <FormDescription>请填写以下真实信息，提交后将在3个工作日内完成审核</FormDescription>
      {/* 后续放输入框、提交按钮等表单元素 */}
    </FormWrapper>
  )
}