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

translated faq: Styling and CSS #145

Merged
merged 7 commits into from
May 4, 2020
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
31 changes: 16 additions & 15 deletions content/docs/faq-styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ 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:
متنی به عنوان 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 وابسته به props یا state کامپوننت باشند معمول است :

```jsx
render() {
Expand All @@ -28,24 +28,25 @@ 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) می تواند آن را ساده تر کند.

### Can I use inline styles? {#can-i-use-inline-styles}
### آیا می توانم از استایل های درون خطی (inline styles) استفاده کنم؟ {#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}
### آیا استایل های درون خطی بد هستند؟ {#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 در 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).
_توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده._ ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه `*.css` تعریف کرده و طبق معمول با استفاده از [`className`](/docs/dom-elements.html#classname) به آن ها مراجعه کنید.

### Can I do animations in 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) or [React Spring](https://github.com/react-spring/react-spring), for example.
### آیا می توانم با ری اکت انیمیشن انجام دهم؟ {#can-i-do-animations-in-react}

ری اکت میتواند برای قدرت بخشیدن به انیمیشن ها استفاده شود. به مثال های [React Transition Group](https://reactcommunity.org/react-transition-group/) و [React Motion](https://github.com/chenglou/react-motion) یا [React Spring](https://github.com/react-spring/react-spring)، نگاه بیاندازید.