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

Custom CSS Injection

You can inject CSS with our special client.injectCustomCss() method.

Passing style definition via string

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

Passing style via link.

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

Was this page helpful?