Summary and Key Takeaways

• Standard CSS can be used to style React components and JSX elements.
• CSS files are typically directly imported into JavaScript files, which is possible thanks to the project build process, which extracts the CSS code and injects it into the document (the HTML file).
• As an alternative to global CSS styles (with element, id, class, or other selectors), inline styles can be used to apply styling to JSX elements.
• When using CSS classes for styling, you must use the className prop (not class).
• Styles can be set statically and dynamically or conditionally with the same syntax that is used for injecting other dynamic or conditional values into JSX code—a pair of curly braces.
• Highly configurable custom components can be built by setting styles (or CSS classes) based on prop values or by merging received prop values with other styles or class name strings.
• When using just CSS, clashing CSS class names can be a problem.
...