Skip to content

Commit

Permalink
Merge pull request #183 from T1mofey1/master
Browse files Browse the repository at this point in the history
Translate "faq-styling"
  • Loading branch information
lex111 authored Feb 27, 2019
2 parents 5f1e5e5 + 6be3551 commit c950247
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions content/docs/faq-styling.md
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).

0 comments on commit c950247

Please sign in to comment.