Skip to content

Translate faq styling #64

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
Jun 7, 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: 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 classes לקומפוננטה שלי? {#how-do-i-add-css-classes-to-components}

Pass a string as the `className` prop:
העבר מחרוזת ל-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 classes תלויים ב-props או 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 classes בדרך כלל טובים יותר לביצועים מאשר inline עיצוב.

### What is CSS-in-JS? {#what-is-css-in-js}
### מה זה CSS ב-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 ב-JS” מתייחס לתבנית שבה CSS מורכב בעזרת JavaScript במקום להיות מוגדר בקובץ חיצוני. קרא את ההשוואה של ספריות CSS ב-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) לדוגמא.