You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.2 KiB
1.2 KiB
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.