Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI.
Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below:
const useStyles = makeStyles(() =>
createStyles({
root: {
display: 'flex'
},
divider:{
width:'1px',
backgroundColor:'rgba(44, 66, 107, 0.15)'
}
}),
);
In the past, when working with SCSS files, I used to tweak styles using Chrome Dev Tools and then copy-paste them into the SCSS file once finalized:
However, when attempting the same process with JavaScript objects, I ended up with regular CSS that was not valid within the object format:
This meant I had to manually modify the CSS to fit the JS object structure as shown in the following examples:
(Although the changes may be minor in some cases, it can become quite cumbersome for larger styling modifications...
I am searching for a method to extract styles directly from Chrome Dev Tools as "JS" CSS styles rather than conventional CSS as it currently generates.
While tools like offer solutions, I aim to eliminate the need for manual copying and pasting.
Your suggestions would be greatly appreciated. Thank you.