React question - why not palce style variable in components?

Hey - coming from an Angular background and learning react -

is there a reason we dont pass style variables as part of the components?

It took me like 5 minutes of staring at this problem until i realized I was declaring the const in my component. It still worked and from a best practices standpoint (also - its a verrrrrry Angular thing to do) im wondering why you wouldnt do that?

Your code so far


const styles = {
color: 'purple',
fontSize: 40,
border: "2px solid purple",
};

class Colorful extends React.Component {
render() {
  // change code below this line. 
 
 ///////////.    * why not place your style variable inside your component? *\\\\\\\\\\\\\
 
  return (
    <div style={styles}>Style Me!</div>
  );
  // change code above this line
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Add Inline Styles in React

Link to the challenge:

It’s an inline style, so all the caveats about inline styles in HTML apply – you can’t preprocess the CSS, you can’t use media queries, you can’t use pseudo classes or elements, you have to prefix everything manually, you can’t cache it, you can’t use animations, etc etc. Inline styles are very useful if you have to dynamically change some specific style, but they aren’t much use as a general styling tool for the same reason they aren’t in non-react apps.

Material UI somehow promotes inline styling for components.
https://material-ui.com/customization/components/ (I am big fan of Material UI)

I normally use inline-style inside presentational components, for children elements.
I have usually a wrapper div with SCSS classes, for layout and etc, then inside I often push inline style when I have small tweaks. like a position relative top, or some margin, padding, text decoration, or cursor pointer.

You can combine classes and inline style if you know what you are doing.

I heavily did this for my latest hobby project (to get it up running ASAP).
This is the repo as example https://github.com/GeorgeCrisan/SpendingoJS so I don’t get accused that I am promoting the app.

I usually do a refactoring session when I got the chance, and clean up after myself.
(abstract repetitive inline style code to css classes)