{"componentChunkName":"component---src-templates-docs-js","path":"/docs/faq-styling.html","result":{"data":{"markdownRemark":{"html":"

Як додавати CSS класи до компонентів?

\n

Передайте рядок як проп className:

\n
render() {\n  return <span className=\"menu navigation-menu\">Меню</span>\n}
\n

Класи зазвичай залежать від пропсів та стану компоненту:

\n
render() {\n  let className = 'menu';\n  if (this.props.isActive) {\n    className += ' menu-active';\n  }\n  return <span className={className}>Меню</span>\n}
\n
\n

Порада

\n

Якщо ви часто пишете такий код, пакунок classnames\nможе спростити його.

\n
\n

Чи можу я використовувати inline стилі?

\n

Так, дивіться документ щодо стилізування .

\n

Чи є inline стилі поганою практикою?

\n

Зазвичай CSS класи кращі за продуктивністю ніж inline стилі.

\n

Що таке CSS-in-JS?

\n

“CSS-in-JS” відносяться до патерну, де CSS описується з використанням JavaScript замість описування у зовнішніх файлах.

\n

Зауважте, що цей функціонал не є частиною React, але надається сторонніми бібліотеками. React не має чіткої точки зору стосовно визначення стилів; якщо ви маєте сумнів, гарним початком може бути визначення ваших стилів в окремому *.css файлі з посиланням на них використовуючи className.

\n

Чи можу я робити анімації в React?

\n

React може використовуватися для роботи з анімаціями. Для прикладів, дивіться React Transition Group та React Spring.

","frontmatter":{"title":"Styling and CSS","next":null,"prev":null},"fields":{"path":"content/docs/faq-styling.md","slug":"docs/faq-styling.html"}}},"pageContext":{"slug":"docs/faq-styling.html"}},"staticQueryHashes":[]}