вземете CSS от инструментите за разработка на chrome като стойност на JavaScript обект

просто започваме да пишем стилове в нашите реагиращи компоненти, използвайки makeStyles кука от material-ui.

така че css сега не е обикновен css, а js обект - изглежда примерно така:

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

не, преди – когато използваме scss файлове, понякога си „играя“ със стиловете на инструментите за разработка на chrome:

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

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

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

(в този пример има много малко ръчна промяна, но в други примери може да има много промени...

търси начин да получи стиловете от инструментите за разработка на chrome като "JS" CSS стилове, а не "обикновен" CSS, както сега. със сигурност мога да използвам някакво ръчно решение като това страхотно:

https://css2js.dotenv.dev/

но искам да избегна цялото това копиране и поставяне

Благодаря.