From 7db4b66b1774ce64247b00eef84cf3e9d92f9699 Mon Sep 17 00:00:00 2001 From: joan xie Date: Mon, 25 Feb 2019 17:05:15 +0800 Subject: [PATCH 1/9] Translate: FAQ\Styling and CSS #4 --- content/docs/faq-styling.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index ddc955e3dd..255eb85420 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -1,14 +1,14 @@ --- 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() { @@ -16,7 +16,7 @@ render() { } ``` -It is common for CSS classes to depend on the component props or state: +CSS 类依赖组件的 props 或 state 的情况很常见： ```jsx render() { @@ -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)查看关于样式的文档。 -### Are inline styles bad? {#are-inline-styles-bad} +### 行内样式不好 (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-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 库的一个比较。 -_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)，举例说明。 From 5953828e7891412993b809365d875c2e57236899 Mon Sep 17 00:00:00 2001 From: joan xie Date: Tue, 26 Feb 2019 09:16:04 +0800 Subject: [PATCH 2/9] Update faq-styling.md --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 255eb85420..53833bc873 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -34,7 +34,7 @@ render() { ### 我可以使用行内样式吗？ {#can-i-use-inline-styles} -是的，在[此处](/docs/dom-elements.html#style)查看关于样式的文档。 +可以，在[此处](/docs/dom-elements.html#style)查看关于样式的文档。 ### 行内样式不好 (bad) 吗？ {#are-inline-styles-bad} From bf97483036fbc8bf8221b73f337fa9f7c0008250 Mon Sep 17 00:00:00 2001 From: LeoEatle Date: Wed, 6 Mar 2019 18:00:58 +0800 Subject: [PATCH 3/9] Update content/docs/faq-styling.md Co-Authored-By: infinnie --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 53833bc873..2113671f9e 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -44,7 +44,7 @@ render() { “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库的一个比较。 -_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有一个观点；如果有所怀疑，一个好的起点是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指代它们。 +_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有一个观点；如果有所疑惑，一个好的起点是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指代它们。 ### 我可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react} From 8e5bd12e01dc0454008be0e98ea473092e863de0 Mon Sep 17 00:00:00 2001 From: joan xie Date: Wed, 6 Mar 2019 18:03:07 +0800 Subject: [PATCH 4/9] Update faq-styling.md --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 2113671f9e..0f941b10a9 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -48,4 +48,4 @@ _注意此功能并不是 React 的一部分，而是由第三方库提供。_ R ### 我可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react} -React 可以被用来实现动画。参见 [React Transition Group](https://reactcommunity.org/react-transition-group/) 和 [React Motion](https://github.com/chenglou/react-motion)，举例说明。 +React 可以被用来实现动画。参见 [React Transition Group](https://reactcommunity.org/react-transition-group/) 和 [React Motion](https://github.com/chenglou/react-motion) 等示例。 From 8eeae4482ad53d63ecde2713744d1d9da2bcaf3c Mon Sep 17 00:00:00 2001 From: LeoEatle Date: Sat, 30 Mar 2019 09:03:11 +0800 Subject: [PATCH 5/9] Update content/docs/faq-styling.md Co-Authored-By: infinnie --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 0f941b10a9..153323b4cd 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -48,4 +48,4 @@ _注意此功能并不是 React 的一部分，而是由第三方库提供。_ R ### 我可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react} -React 可以被用来实现动画。参见 [React Transition Group](https://reactcommunity.org/react-transition-group/) 和 [React Motion](https://github.com/chenglou/react-motion) 等示例。 +React 可以被用来实现强大的动画效果。参见 [React Transition Group](https://reactcommunity.org/react-transition-group/) 和 [React Motion](https://github.com/chenglou/react-motion) 等示例。 From 346b0c88983212a2c4faaf8f46c715bdf7901cfd Mon Sep 17 00:00:00 2001 From: LeoEatle Date: Sat, 30 Mar 2019 09:04:30 +0800 Subject: [PATCH 6/9] Update content/docs/faq-styling.md Co-Authored-By: infinnie --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 153323b4cd..5443d9a806 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -44,7 +44,7 @@ render() { “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库的一个比较。 -_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有一个观点；如果有所疑惑，一个好的起点是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指代它们。 +_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有明确态度；如果有所疑惑，一个好的开始是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指代它们。 ### 我可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react} From 1806366680346f00ab2e65d106894b1935a581d5 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Mon, 1 Apr 2019 18:19:55 +0800 Subject: [PATCH 7/9] Update faq-styling.md --- content/docs/faq-styling.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 5443d9a806..619ba47d7d 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,7 +6,7 @@ layout: docs category: FAQ --- -### 我如何为组件添加 CSS 类？ {#how-do-i-add-css-classes-to-components} +### 如何为组件添加 CSS 的 class？ {#how-do-i-add-css-classes-to-components} 传递一个字符串作为 `className` 属性： @@ -16,7 +16,7 @@ render() { } ``` -CSS 类依赖组件的 props 或 state 的情况很常见： +CSS 的 class 依赖组件的 props 或 state 的情况很常见： ```jsx render() { @@ -30,22 +30,22 @@ render() { >提示 > ->如果你经常发现自己写类似这样的代码， [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package 可以简化这一过程。 +>如果你经常发现自己写类似这样的代码，[classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) 的 package 可以简化这一过程。 -### 我可以使用行内样式吗？ {#can-i-use-inline-styles} +### 可以使用行内样式吗？ {#can-i-use-inline-styles} 可以，在[此处](/docs/dom-elements.html#style)查看关于样式的文档。 ### 行内样式不好 (bad) 吗？ {#are-inline-styles-bad} -从性能角度来说，CSS 类通常比行内样式更好。 +从性能角度来说，CSS 的 class 通常比行内样式更好。 ### 什么是 CSS-in-JS? {#what-is-css-in-js} “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库的一个比较。 -_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有明确态度；如果有所疑惑，一个好的开始是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指代它们。 +_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有明确态度；如果有所疑惑，好的方式是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指定它们。 -### 我可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react} +### 可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react} React 可以被用来实现强大的动画效果。参见 [React Transition Group](https://reactcommunity.org/react-transition-group/) 和 [React Motion](https://github.com/chenglou/react-motion) 等示例。 From 4fe7ce1638412c6c60e607d4f604b7dba4250111 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Mon, 1 Apr 2019 18:20:32 +0800 Subject: [PATCH 8/9] Update faq-styling.md --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 619ba47d7d..6d9eaaa5ba 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -42,7 +42,7 @@ render() { ### 什么是 CSS-in-JS? {#what-is-css-in-js} -“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库的一个比较。 +“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库之间的对比。 _注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有明确态度；如果有所疑惑，好的方式是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指定它们。 From 9697436111f37985d27c73a1994eb0a4b1eab6d3 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Mon, 1 Apr 2019 18:25:05 +0800 Subject: [PATCH 9/9] Update faq-styling.md --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 6d9eaaa5ba..7621128cba 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -44,7 +44,7 @@ render() { “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在[此处](https://github.com/MicheleBertoli/css-in-js)阅读 CSS-in-JS 库之间的对比。 -_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有明确态度；如果有所疑惑，好的方式是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指定它们。 +_注意此功能并不是 React 的一部分，而是由第三方库提供。_ React 对样式如何定义并没有明确态度；如果存在疑惑，比较好的方式是和平时一样，在一个单独的 `*.css` 文件定义你的样式，并且通过 [`className`](/docs/dom-elements.html#classname) 指定它们。 ### 可以在 React 中实现动画效果吗？ {#can-i-do-animations-in-react}