React Antd 标题 - 粗体

Question

我想将标题的前半部分加粗

<Header>
    <PageHeader
        style={{ padding: 10 }}
        className="site-page-header"  
        title="AbcDef" />
</Header>

如何制作标题AbcDef（部分标题为粗体）？

这可能吗？谢谢

Answer 1

解决此问题的一种方法是让传递给 PageHeader 的“标题”道具成为 HTML 元素，而不仅仅是字符串，这样您就可以在文本周围放置标签想要加粗。

您的 PageHeader 界面需要具有这种类型的标题（或其他 HTML 元素类型，如果需要）

title: HTMLHeadingElement

现在，当您将标题传递给 PageHeader 时，它看起来像这样

<Header>
    <PageHeader
        style={{ padding: 10 }}
        className="site-page-header"  
        title={<h1><strong>Abc</strong>Def</h1>} />
</Header>

Answer 2

Ant Design Way

<PageHeader
  style={{ padding: 10 }}
  className="site-page-header" 
  title={
    <h1>
      <span style={{fontWeight: 'bold'}}>Bold</span> Title
    </h1>}
/>

纯 React 方式

如果您需要 option/prop 来设置要在标题中加粗的字符数（从左到右），您可以这样做：

Parent 组件

<PageHeader
  ...
  boldCharsCount={3}
</PageHeader>

PageHeader 组件

const PageHeader = ({title, boldCharsCount, ...rest}) => {
  const part1 = title.substr(0,0+boldCharsCount);
  const part2 = title.substr(0+boldCharsCount);

  return (
    <span>
      <span style={{fontWeight: 'bold'}}>
        {part1}
      </span>
      {part2}
    </span>
  );
}

我为您创建了一个小演示 — How To Bold First N chars of Text/Title in React

P.S。请记住，您通过 boldCharsCount 传递的数字也在计算 white-spaces。因此，您需要稍微调整此实现以涵盖这种情况。

React Antd 标题 - 粗体

React Antd Title - Bold

reactjs

antd