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

docs(cn): translate content/docs/faq-styling.md into Chinese #134

Merged
merged 9 commits into from
Apr 1, 2019
Merged
Changes from 1 commit
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
30 changes: 15 additions & 15 deletions content/docs/faq-styling.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
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>
}
```

It is common for CSS classes to depend on the component props or state:
CSS 类依赖组件的 props state 的情况很常见:
QC-L marked this conversation as resolved.
Show resolved Hide resolved

```jsx
render() {
Expand All @@ -28,24 +28,24 @@ 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) package 可以简化这一过程。

### 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).
是的,在[此处](/docs/dom-elements.html#style)查看关于样式的文档。
infinnie marked this conversation as resolved.
Show resolved Hide resolved

### Are inline styles bad? {#are-inline-styles-bad}
### 行内样式不好 (bad) 吗? {#are-inline-styles-bad}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为啥 bad 也括号一下?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 行内样式不好 (bad) 吗? {#are-inline-styles-bad}
### 内联样式不好吗? {#are-inline-styles-bad}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bad 不是你们推荐保留原文的么?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

之前不翻译的场景是在注释中,单独的一个 Bad!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里倒也无伤大雅,所以我当时就没有修改


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 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库的一个比较。
QC-L marked this conversation as resolved.
Show resolved Hide resolved

_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) 指代它们。
infinnie marked this conversation as resolved.
Show resolved Hide resolved

### 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),举例说明。
infinnie marked this conversation as resolved.
Show resolved Hide resolved