React Antd Title - Bold

One way you could go about solving this is to have your "title" prop you are passing in to PageHeader be an HTML element rather than just a string, allowing you to put tags around the text you want bold.

Your interface for PageHeader would need to have this type for the title (or other HTML element type if needed)

title: HTMLHeadingElement

Now when you pass in your title to PageHeader it would look something like this

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

Ant Design Way

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

Pure React Way

If you need to have an option/prop to set how many chars you're going to bold in the title (from left to right) you can do something like:

Parent Component

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

PageHeader Component

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

I created a small demo for you — How To Bold First N chars of Text/Title in React

P.S. Have in mind that number you pass via boldCharsCount is counting white-spaces too. So, you'll need to tweak this implementation a little bit to cover that case too.