diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index ddc955e3d..2d130d06d 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,22 +1,22 @@ --- id: faq-styling -title: Styling and CSS +title: Стилизация и CSS permalink: docs/faq-styling.html layout: docs category: FAQ --- -### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components} +### Как добавить CSS-классы в компоненты? {#how-do-i-add-css-classes-to-components} -Pass a string as the `className` prop: +Передайте в проп `className` строку: ```jsx render() { - return Menu + return Меню } ``` -It is common for CSS classes to depend on the component props or state: +Обычно CSS-классы зависят от пропсов или состояния: ```jsx render() { @@ -24,28 +24,28 @@ render() { if (this.props.isActive) { className += ' menu-active'; } - return Menu + return Меню } ``` ->Tip +>Совет > ->If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it. +>Если вы часто пишите похожий код, то пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) поможет упростить его. -### Can I use inline styles? {#can-i-use-inline-styles} +### Как можно использовать встроенные стили? {#can-i-use-inline-styles} -Yes, see the docs on styling [here](/docs/dom-elements.html#style). +Конечно, прочитайте [документацию об элементах DOM](/docs/dom-elements.html#style). -### Are inline styles bad? {#are-inline-styles-bad} +### Встроенные стили — это плохо? {#are-inline-styles-bad} -CSS classes are generally better for performance than inline styles. +CSS-классы, как правило, лучше для производительности, чем встроенные стили. -### What is CSS-in-JS? {#what-is-css-in-js} +### Что такое CSS-in-JS? {#what-is-css-in-js} -"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js). +«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах. Ознакомтесь со сравнением библиотек по работе с «CSS-in-JS» в [этом репозитории](https://github.com/MicheleBertoli/css-in-js). -_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname). +_Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками._ React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением `*.css`, как вы ранее привыкли это делать, а затем указать нужные классы с помощью [`className`](/docs/dom-elements.html#classname). -### Can I do animations in React? {#can-i-do-animations-in-react} +### Можно создавать анимации в React? {#can-i-do-animations-in-react} -React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example. +React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки [React Transition Group](https://reactcommunity.org/react-transition-group/) и [React Motion](https://github.com/chenglou/react-motion).