Skip to content

React styling #18

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

Merged
merged 2 commits into from
Feb 27, 2019
Merged
Changes from all 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
34 changes: 18 additions & 16 deletions content/docs/faq-styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,48 @@ 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:
Класи зазвичай залежать від пропсів та стану компоненту:

```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}
### Чи можу я використовувати inline стилі? {#can-i-use-inline-styles}

Yes, see the docs on styling [here](/docs/dom-elements.html#style).
Так, дивіться [документ](/docs/dom-elements.html#style) щодо стилізування .

### Are inline styles bad? {#are-inline-styles-bad}
### Чи є inline стилі поганою практикою? {#are-inline-styles-bad}

CSS classes are generally better for performance than inline styles.
Зазвичай CSS класи кращі за продуктивністю ніж inline стилі.

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