Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate "faq-styling" #183

Merged
merged 4 commits into from
Feb 27, 2019
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions content/docs/faq-styling.md
Original file line number Diff line number Diff line change
@@ -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 <span className="menu navigation-menu">Menu</span>
}
```

It is common for CSS classes to depend on the component props or state:
Обычно CSS классы зависят от пропсов или состояния:

```jsx
render() {
Expand All @@ -28,24 +28,24 @@ render() {
}
```

>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) может упростить его.
lex111 marked this conversation as resolved.
Show resolved Hide resolved

### Can I use inline styles? {#can-i-use-inline-styles}
### Могу ли я использовать встроенные стили? {#can-i-use-inline-styles}
lex111 marked this conversation as resolved.
Show resolved Hide resolved

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}
lex111 marked this conversation as resolved.
Show resolved Hide resolved

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).