What is the difference between inline CSS and external CSS in React?

What is the difference between inline CSS and external CSS in React?

Inline CSS in React is applied directly to elements using the 'style' attribute, while external CSS is defined in separate stylesheet files.

Can you give me an example of inline CSS in a React component?

Sure! Here's a simple example:

function App() {
  return <div style={{ color: 'blue', fontSize: '20px' }}>Hello, World!</div>;
}

What are the advantages of using external CSS?

External CSS promotes better organization, reusability, and separation of concerns, making it easier to maintain styles across components.

Are there any downsides to using inline CSS?

Yes, inline CSS can lead to code duplication and makes it harder to manage styles, especially in larger applications.