use of style inside jsx files

[MAKIO135]

Shouldn't we move all style properties to scss files?
Or should we move everything into jsx files?

[MAKIO135]

ok, since Material UI inlines CSS, we have to put additional styles in jsx files, do we put everything in jsx then?

[clemsos]

I will say

• Sass for styling at the app level (typo, layout, etc)
• Inline CSS at the component level

A while backed I noticed this rep which may help to decide https://github.com/MicheleBertoli/css-in-js

[clemsos]

For inline styling , a nice convention is to have a styles object at the top of the .jsx file with all the styling inside

const styling = {
  WeirdButton : {
    marginTop : '2em'
  }
}

Then just pass it to the component afterwards

<WeirdButton style={styling.WeirdButton} />

[clemsos]

So far, tstyling is done by a mix of 1) maintaining a separate .scss file in the component folder to store general styling and 2) use .jsx inline css to style dynamically what changes