オブジェクトリテラルは既知のプロパティのみ指定できます。'props' は型 'Properties' に存在しませんが発生するときの解決法

エラーが発生しているファイル

ColfulMessage.tsx

type Props = {
    color: string;
    message: string;
  }
export const ColorfulMessage = (props:Props) => {
    return(
            <>
        <p style={{props.color }}>{props.message}</p>
            <p style={{ props.color }}>{props.message}</p>
            </>
    )
}

解決策

オブジェクトリテラルでpropsの値にアクセスをするときにプロパティを指定する。
※オブジェクトリテラルの表し方｛｝で囲む

ColorfulMessage.tsx

type Props = {
    color: string;
    message: string;
  }
  
export const ColorfulMessage = (props:Props) => {
    return(
            <>
        <p style={{color:props.color }}>{props.message}</p>
            <p style={{color: props.color }}>{props.message}</p>
            </>
    )
}

補足

style={{color:props.color }}の一番外側の｛｝はJavascriptですということを示している。
内側にある｛｝はオブジェクトであることを示している。