react.dev/faq-styling.md at 12e32e50ac98ba603056f2e21e032fbbe7b1bb3e

mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 12:43:05 +00:00

Files

Dan Abramov 986d97788c Minor FAQ updates (#308 )

* Don't use experimental syntax unless necessary

* Edit another page

* Update another page

* Unrelated bikeshed on virtual DOM

* Please, no *.jsx, we don't recommend it

* Update faq-structure.md

* Minor updates

* Update faq-ajax.md

* Update faq-functions.md

* Add binding explanation

2017-11-20 22:05:00 +00:00

1.2 KiB

Raw Blame History

id, title, permalink, layout, category

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

How do I add CSS classes to components?

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.

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.

1.2 KiB Raw Blame History