Get Started
- Overview
- Quickstart
- Setup
Key Concepts
- Overview
- Organizations
- Documents
- Locations
- Users
- Access Control
Async Collaboration
- Comments
- In-app Notifications
- Inline Reactions
- Recorder
- View Analytics
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Follow Me Mode
- Huddle
- Live Selection
- Live State Sync
- Single Editor Mode
- Video Player Sync
Email Notifications
Miscellaneous
- Migrate From Cord
- Common Integration Questions
CSS Injection
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'
});
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>
);
}
Was this page helpful?
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>
);
}