получить CSS из инструментов chrome dev как значение объекта JavaScript

мы просто начинаем писать стили в наших реагирующих компонентах, используя makeStyles крючок из материала-уи.

так что css теперь не обычный css, а объект js - выглядит примерно так, например:

const useStyles = makeStyles(() =>
 createStyles({
     root: {
         display: 'flex'
     },
     divider:{
         width:'1px',
         backgroundColor:'rgba(44, 66, 107, 0.15)'
     }
 }),
);

нет, раньше - когда мы используем файлы scss, я иногда «играю» со стилями в инструментах chrome dev:

и когда все в порядке, я копирую->вставляю его в файл scss.

когда я пытаюсь сделать то же самое здесь, я получаю обычный CSS, который недействителен в объекте js:

и вам нужно изменить его вручную, чтобы он был действительным как значение объекта js:

(в этом примере очень мало изменений вручную, но в других примерах может быть много изменений...

ищем способ получить стили из инструментов chrome dev как стили CSS «JS», а не «обычные» CSS, как сейчас. конечно, я могу использовать какое-нибудь ручное решение, подобное этому замечательному:

https://css2js.dotenv.dev/

но я хочу избежать всего этого копипаста

Благодарю.