import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';

export default function YourDocument() {

  const { client } = useVeltClient();


  useEffect(() => {
    if (client) {
        client?.injectCustomCss({
        type: 'styles',
        value: `
            .modal-div.dialog .modal-author__name {
            font-size: 10rem !important;
            background-color: green !important;
            color: white !important;
            }
        `
        });
        client?.injectCustomCss({
            type: 'link',
            value: '/relative_path_to_css/styles.css' // you could also pass the absolute link: 'https://yourappdomain.com/pathtocss/styles.css'
        });
    }
  }, [client]);

  return (
    <div>
      //your document template
    </div>
    
  );
}

<script>
Velt?.injectCustomCss({
    type: 'styles',
    value: `
        .modal-div.dialog .modal-author__name {
            font-size: 10rem !important;
            background-color: green !important;
            color: white !important;
        }
    `
});

Velt?.injectCustomCss({
    type: 'link',
    value: '/relative_path_to_css/styles.css' // you could also pass the absolute link: 'https://yourappdomain.com/pathtocss/styles.css'
});

</script>