> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Injection

<Tabs>
  <Tab title="React / Next.js">
    ## Custom CSS Injection

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

    ### Passing style definition via string

    ```jsx theme={null}
    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.

    ```jsx theme={null}
    client?.injectCustomCss({
      type: 'link',
      value: '/relative_path_to_css/styles.css' // you could also pass the absolute link: 'https://yourappdomain.com/pathtocss/styles.css'
    });
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ## Custom CSS Injection

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

    ### Passing style definition via string

    ```jsx theme={null}
    Velt?.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.

    ```jsx theme={null}
    Velt?.injectCustomCss({
      type: 'link',
      value: '/relative_path_to_css/styles.css' // you could also pass the absolute link: 'https://yourappdomain.com/pathtocss/styles.css'
    });
    ```
  </Tab>
</Tabs>

<RequestExample>
  ```jsx React / Next.js theme={null}



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

  ```

  ```html HTML theme={null}
  <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>

  ```
</RequestExample>