export const frameStyles = { 'frame-modal': { 'background-color': '#fff', 'border-radius': '5px', margin: '0 auto', padding: '20px', width: '70%' }, 'frame-button': { 'background-color': '#ff4343', padding: '4px 16px', 'border-radius': '5px', color: '#fff', cursor: 'pointer', 'text-align': 'center', border: 'none' }, 'frame-button:hover': { 'background-color': '#de3838' }, } export const setStyles = (stylesObject: object) => { const range = document.createRange(); let res = ""; let arr: string[] = [] Object.entries(stylesObject).forEach(([key]) => { // @ts-ignore const obj = JSON.stringify(stylesObject[key], null, "\t") .replace(/"/g, "") .replace(/,\n/g, ";") .replace(/\}/g, ";}"); arr.push(`.${key}${obj}`) }); res = `<style>${arr.join(' ')}</style>`; const frag = range.createContextualFragment(res); // @ts-ignore document.querySelector("head").append(frag); };