如何在React应用中使用Styled Components实现Bulma样式迁移

现存代码核心问题 #

• 组件命名规则不符合要求：React 识别自定义组件（含 Styled Components 生成的组件）时，要求组件名必须大写开头。当前将 styled.div 生成的组件命名为小写的 theme，React 会将其判定为无效原生 HTML 标签，完全无法关联绑定的样式逻辑；同时这个组件的实际作用是包裹头部内容的容器，命名为 theme 语义完全错位（真正的全局主题配置是传给 ThemeProvider 的纯 JS 对象，和生成样式组件的逻辑完全不同）。
• 新旧样式体系冗余残留：代码中保留的 Bulma 类名（title mb-3、subtitles mt-0）没有存在价值，迁移到 Styled Components 时，这些排版、间距规则应该直接整合到对应的样式组件中，不需要保留旧框架的类依赖。
• CSS 属性书写错误：
  • font-style: bold 存在属性-值匹配错误，bold 是 font-weight 的合法值，font-style 用于控制文本斜体/正体状态
  • 指定字体族的写法误用了属性名，Verdana 这类字体值应该绑定在 font-family 上，而非 font-style
• 冗余结构包裹：最外层的空 Fragment <> 没有实际作用，组件根节点直接为头部容器即可，不需要额外嵌套。

修正后可直接运行的代码 #

import React, {FC} from 'react';
import styled from 'styled-components';

// 大写命名的内容容器
const HeaderWrapper = styled.div`
  text-align: center;
  background-color: #535151;
  font-weight: bold;
  padding: 2rem 0;
`;

const StyledH1 = styled.h1`
  font-size: 60pt;
  font-family: Verdana, sans-serif;
  color: black;
  margin-bottom: 1rem; /* 替代原Bulma的mb-3间距规则 */
`;

const StyledSubtitle = styled.h2`
  font-size: 1.2rem;
  color: #eaeaea;
  margin-top: 0; /* 替代原Bulma的mt-0间距规则 */
`;

interface HeaderProps {
  title: string;
  subtitle: string;
}

const Header: FC<HeaderProps> = ({title, subtitle}) =>{
  return (
    <HeaderWrapper>
      <StyledH1>{title}</StyledH1>
      <StyledSubtitle>{subtitle}</StyledSubtitle>
    </HeaderWrapper>
  );
}

export default Header;

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