React Antd标题-粗体

Question

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

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

如何使标题AbcDef(部分标题为粗体(？

这可能吗？谢谢

Answer 1

蚂蚁设计方式

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

纯反应方式

如果你需要一个选项/道具来设置你要在标题中加粗的字符数(从左到右(，你可以这样做：

父组件

<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>
);
}

我为你创建了一个小演示——如何在React 中加粗文本/标题的前N个字符

附言：请记住，您通过boldCharsCount传递的数字也在计算空格。因此，您需要稍微调整一下这个实现，以涵盖这种情况。

Answer 2

解决此问题的一种方法是；标题"；传递给PageHeader的prop是一个HTML元素，而不仅仅是一个字符串，允许您在想要粗体的文本周围放置标记。

您的PageHeader接口需要具有标题的这种类型(或者其他HTML元素类型，如果需要(

title: HTMLHeadingElement

现在，当你把标题传递到PageHeader时，它看起来像这个

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