|
1 | 1 | ---
|
2 | 2 | id: faq-styling
|
3 |
| -title: Стили и CSS |
| 3 | +title: Стилизация и CSS |
4 | 4 | permalink: docs/faq-styling.html
|
5 | 5 | layout: docs
|
6 | 6 | category: FAQ
|
7 | 7 | ---
|
8 | 8 |
|
9 |
| -### Как мне добавить CSS классы в компоненты? {#how-do-i-add-css-classes-to-components} |
| 9 | +### Как добавить CSS-классы в компоненты? {#how-do-i-add-css-classes-to-components} |
10 | 10 |
|
11 | 11 | Передайте в проп `className` строку:
|
12 | 12 |
|
13 | 13 | ```jsx
|
14 | 14 | render() {
|
15 |
| - return <span className="menu navigation-menu">Menu</span> |
| 15 | + return <span className="menu navigation-menu">Меню</span> |
16 | 16 | }
|
17 | 17 | ```
|
18 | 18 |
|
19 |
| -Обычно CSS классы зависят от пропсов или состояния: |
| 19 | +Обычно CSS-классы зависят от пропсов или состояния: |
20 | 20 |
|
21 | 21 | ```jsx
|
22 | 22 | render() {
|
23 | 23 | let className = 'menu';
|
24 | 24 | if (this.props.isActive) {
|
25 | 25 | className += ' menu-active';
|
26 | 26 | }
|
27 |
| - return <span className={className}>Menu</span> |
| 27 | + return <span className={className}>Меню</span> |
28 | 28 | }
|
29 | 29 | ```
|
30 | 30 |
|
31 | 31 | >Совет
|
32 | 32 | >
|
33 |
| ->Если вы часто пишите такой код, пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) может упростить его. |
| 33 | +>Если вы часто пишите похожий код, то пакет [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) поможет упростить его. |
34 | 34 |
|
35 |
| -### Могу ли я использовать встроенные стили? {#can-i-use-inline-styles} |
| 35 | +### Как можно использовать встроенные стили? {#can-i-use-inline-styles} |
36 | 36 |
|
37 | 37 | Конечно, прочитайте [документацию об элементах DOM](/docs/dom-elements.html#style).
|
38 | 38 |
|
39 |
| -### Встроенные стили это плохо? {#are-inline-styles-bad} |
| 39 | +### Встроенные стили — это плохо? {#are-inline-styles-bad} |
40 | 40 |
|
41 |
| -CSS классы, как правило, лучше для производительности, чем встроенные стили. |
| 41 | +CSS-классы, как правило, лучше для производительности, чем встроенные стили. |
42 | 42 |
|
43 | 43 | ### Что такое CSS-in-JS? {#what-is-css-in-js}
|
44 | 44 |
|
45 |
| -"CSS-in-JS" относится к паттерну, в котором CSS создаётся с использованием JavaScript, а не во внешних файлах. Почитайте сравнение CSS-in-JS библиотек [здесь](https://github.com/MicheleBertoli/css-in-js). |
| 45 | +«CSS-in-JS» — это паттерн, в котором CSS-код создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах. Ознакомтесь со сравнением библиотек по работе с «CSS-in-JS» в [этом репозитории](https://github.com/MicheleBertoli/css-in-js). |
46 | 46 |
|
47 |
| -_Обратите внимание, что эта функциональность не является частью React, но она предоставляется сторонними библиотеками._ React не имеет никакого отношения к тому, как определяются стили. Если у вас есть сомнения, хорошей отправной точкой является определение ваших стилей в отдельном файле `*.css` как обычно, и обращение к ним с помощью [`className`](/docs/dom-elements.html#classname). |
| 47 | +_Обратите внимание, что данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками._ React ничего не знает про то, как определяются стили. Если вы сомневаетесь, использовать указанный выше способ, то хорошим началом станет определение стилей в отдельном файле с расширением `*.css`, как вы ранее привыкли это делать, а затем указать нужные классы с помощью [`className`](/docs/dom-elements.html#classname). |
48 | 48 |
|
49 |
| -### Могу ли я создавать анимации в React? {#can-i-do-animations-in-react} |
| 49 | +### Можно создавать анимации в React? {#can-i-do-animations-in-react} |
50 | 50 |
|
51 | 51 | React может использоваться для создания крутых анимаций! В качестве примера посмотрите библиотеки [React Transition Group](https://reactcommunity.org/react-transition-group/) и [React Motion](https://github.com/chenglou/react-motion).
|
0 commit comments