Adding bold (boolean) to Material-ui (raect)

Question

I have a Typography component from Material-UI (MUI) and i need to add a bold option (with type - boolean).

My Typography component

import React, { FC } from 'react';
import Typo from '@material-ui/core/Typography';

interface IText {
  [property: string]: FC;
}

// for styles of each variant - see 'theme.ts'
const Typography: IText = {
  Title1: ({ children }) => (
    <Typo variant="subtitle1" component="h2">
      {children}
    </Typo>
  ),
  Title2: ({ children }) => (
    <Typo variant="subtitle2" component="h3">
      {children}
    </Typo>
  ),
//....More like this below......
};
export default Typography;

And i use it like this (in my others components): <Typography.Title1>/*...Some code here...*/</Typography.Title1> and i want add bold like this : <Typography.Title1 bold>/*...Some code here...*/</Typography.Title1> and the text will bold.

I have tried this to add an interface but i got an error in every component i use the typography...

interface IText {
  [property: string]: FC;
}
interface IBold {
  bold?: boolean;
}

type IProps = IText | IBold;

const style = { fontWeight: 'bold' };

// for styles of each variant - see 'theme.ts'
const Typography: IProps = {
  Title1: ({ children }, bold) => (
    <Typo style={bold && style} variant="subtitle1" component="h2">
      {children}
    </Typo>
  ),

the error

Property 'Title1' does not exist on type 'IProps'. Property 'Title1' does not exist on type 'IBold'.ts(2339)

hope i wrote okay... Thanks!

Answer 1

I solved it. I add to the IText interface the IBold interface.

Like this:

interface IText {
  [property: string]: FC<IBold>;
}
//....
const Typography: IText = {
  Title1: ({ children }, bold) => (
    <Typo style={bold && style} variant="subtitle1" component="h2">
      {children}
    </Typo>
  ),
//....

and then, from the used component:

<Typography.Title1 bold={true}>
        //Some code
 </Typography.Title1>,
//...