react.dev/content/docs/faq-styling.md

id	title	permalink	layout	category
faq-styling	Styling and CSS	docs/faq-styling.html	docs	FAQ

How do I add CSS classes to components?

Import the CSS file in which the styles are scoped:

import from './path/to/Filename.css';

Pass a string as the className prop:

render() {
  return <span className="menu navigation-menu">Menu</span>
}

It is common for CSS classes to depend on the component props or state:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

If you often find yourself writing code like this, classnames package can simplify it.

Can I use inline styles?

Yes, see the docs on styling here.

Are inline styles bad?

CSS classes are generally more efficient than inline styles.

What is CSS-in-JS?

CSS-in-JS refers to a pattern where CSS is written with Javascript, then extracted into a stylesheet.It is not mandatory to use CSS-in-JS.

Comparison of CSS-in-JS Libraries

Can I do animations in React?

React can be used to power animations. See React Transition Group and React Motion, for example.