{"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

Обычно CSS-классы зависят от пропсов или состояния:

\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

Конечно, прочитайте документацию об элементах DOM.

\n

Встроенные стили — это плохо?

\n

CSS-классы, как правило, лучше для производительности, чем встроенные стили.

\n

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

\n

«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах.

\n

Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками. React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением *.css, как вы ранее привыкли это делать, а затем указать нужные классы с помощью className.

\n

Можно создавать анимации в React?

\n

React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки React Transition Group, React Motion или React Spring.

","frontmatter":{"title":"Стилизация и CSS","next":null,"prev":null},"fields":{"path":"content/docs/faq-styling.md","slug":"docs/faq-styling.html"}}},"pageContext":{"slug":"docs/faq-styling.html"}},"staticQueryHashes":[]}