-
Notifications
You must be signed in to change notification settings - Fork 387
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #183 from T1mofey1/master
Translate "faq-styling"
- Loading branch information
Showing
1 changed file
with
17 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,51 +1,51 @@ | ||
--- | ||
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 <span className="menu navigation-menu">Menu</span> | ||
return <span className="menu navigation-menu">Меню</span> | ||
} | ||
``` | ||
|
||
It is common for CSS classes to depend on the component props or state: | ||
Обычно CSS-классы зависят от пропсов или состояния: | ||
|
||
```jsx | ||
render() { | ||
let className = 'menu'; | ||
if (this.props.isActive) { | ||
className += ' menu-active'; | ||
} | ||
return <span className={className}>Menu</span> | ||
return <span className={className}>Меню</span> | ||
} | ||
``` | ||
|
||
>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). |