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.

Sign up for GitHub

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 reference/react-dom/components/style into Chinese #1440

Merged
merged 5 commits into from
Feb 7, 2024
Merged

docs(cn): translate reference/react-dom/components/style into Chinese #1440

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e2c31b1
docs(cn): translate reference/react-dom/components/style into Chinese
Yucohny Feb 4, 2024
9875823
Update src/content/reference/react-dom/components/style.md
Yucohny Feb 6, 2024
e1811a6
Update src/content/reference/react-dom/components/style.md
Yucohny Feb 6, 2024
7472319
Update src/content/reference/react-dom/components/style.md
Yucohny Feb 6, 2024
acb34b7
Update src/content/reference/react-dom/components/style.md
Yucohny Feb 7, 2024
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
50 changes: 25 additions & 25 deletions src/content/reference/react-dom/components/style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ canary: true

<Canary>

React's extensions to `<style>` are currently only available in React's canary and experimental channels. In stable releases of React `<style>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
React 对 `<style>` 的扩展当前仅在 React Canary 与 experimental 渠道中可用。在 React 的稳定版本中，`<style>` 仅作为 [浏览器内置 HTML 组件](https://react.dev/reference/react-dom/components#all-html-components) 使用。请在 [此处了解更多关于 React 发布渠道的信息](/community/versioning-policy#all-release-channels)。

</Canary>

<Intro>

The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) lets you add inline CSS stylesheets to your document.
[浏览器内置的 `<style>` ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) 允许向文档添加内联 CSS 样式表。

```js
<style> p { color: red; } </style>
Expand All @@ -23,53 +23,53 @@ The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/d

---

## Reference {/*reference*/}
## 参考 {/*reference*/}

### `<style>` {/*style*/}

To add inline styles to your document, render the [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style). You can render `<style>` from any component and React will [in certain cases](#special-rendering-behavior) place the corresponding DOM element in the document head and de-duplicate identical styles.
渲染 [内置的浏览器 `<style>` 组件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) 以向文档添加内联样式。可以在任何组件中渲染 `<style>`，React 将在某些情况下将相应的 DOM 元素放置在文档头部，并对相同的样式进行去重。

```js
<style> p { color: red; } </style>
```

[See more examples below.](#usage)
[参见下方更多示例](#usage)。

#### Props {/*props*/}
#### 属性 {/*props*/}

`<style>` supports all [common element props.](/reference/react-dom/components/common#props)
`<style>` 支持所有 [常见元素属性](/reference/react-dom/components/common#props)。

* `children`: a string, required. The contents of the stylesheet.
* `precedence`: a string. Tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other. Its value can be (in order of precedence) `"reset"`, `"low"`, `"medium"`, `"high"`. Stylesheets with the same precedence go together whether they are `<link>` or inline `<style>` tags or loaded using the [`preload`](/reference/react-dom/preload) or [`preinit`](/reference/react-dom/preinit) functions.
* `href`: a string. Allows React to [de-duplicate styles](#special-rendering-behavior) that have the same `href`.
* `media`: a string. Restricts the spreadsheet to a certain [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
* `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
* `title`: a string. Specifies the name of an [alternative stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
* `children`：字符串，必需字段，表示样式表的内容。
* `precedence`：字符串，告诉 React 在文档 `<head>` 中排列 `<style>` DOM 节点的位置，确定哪个样式表可以覆盖另一个，可能的值包括（按优先级排序）`"reset"`、`"low"`、`"medium"` 与 `"high"`。无论是 `<link>` 还是内联 `<style>` 标签，或者使用 [`preload`](/reference/react-dom/preload) 或 [`preinit`](/reference/react-dom/preinit) 函数加载的样式表，具有相同优先级的将一起处理。
* `href`：字符串，允许 React [去重具有相同 `href` 的样式](#special-rendering-behavior)。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved
* `media`：字符串，将样式表限制为特定的 [媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)。
* `nonce`：字符串，表示使用严格内容安全策略时允许资源的 [加密随机数](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/nonce)。
* `title`：字符串，用于指定 [替代样式表](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets) 的名称。

Props that are **not recommended** for use with React:
不建议在 React 中使用的属性：

* `blocking`: a string. If set to `"render"`, instructs the browser not to render the page until the stylesheet is loaded. React provides more fine-grained control using Suspense.
* `blocking`：字符串。如果指定为 `"render"`，指示浏览器在样式表加载之前不要渲染页面。React 使用 Suspense 提供了更精细的控制。

#### Special rendering behavior {/*special-rendering-behavior*/}
#### 特殊的渲染行为 {/*special-rendering-behavior*/}

React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
React 可以将 `<style>` 组件移动到文档的 `<head>` 中，去重相同的样式表，并在样式表加载时 [挂起](/reference/react/Suspense)。

To opt into this behavior, provide the `href` and `precedence` props. React will de-duplicate styles if they have the same `href`. The precedence prop tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other.
请提供 `href` 和 `precedence` 属性以选择此行为。如果样式表具有相同的 `href`，React 将去重样式。优先级属性告诉 React 在文档的 `<head>` 中排列 `<style>` DOM 节点的位置，从而确定哪个样式表可以覆盖另一个。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

This special treatment comes with two caveats:
这种特殊处理带来两个注意事项：

* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
* React may leave the style in the DOM even after the component that rendered it has been unmounted.
* 在样式被渲染后，React 将忽略属性的更改（在开发模式中，如果发生这种情况，React 将发出警告）。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved
* 即使渲染它的组件已被卸载，React 也可能将样式保留在 DOM 中。

---

## Usage {/*usage*/}
## 用法 {/*usage*/}

### Rendering an inline CSS stylesheet {/*rendering-an-inline-css-stylesheet*/}
### 渲染一个内联 CSS 样式表 {/*rendering-an-inline-css-stylesheet*/}

If a component depends on certain CSS styles in order to be displayed correctly, you can render an inline stylesheet within the component.
如果一个组件依赖于某些 CSS 样式以正确显示，可以在组件内部渲染一个内联样式表。

If you supply an `href` and `precedence` prop, your component will suspend while the stylesheet is loading. (Even with inline stylesheets, there may be a loading time due to fonts and images that the stylesheet refers to.) The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
如果提供了 `href` 和 `precedence` 属性，组件将在样式表加载时挂起（即使是内联样式表，由于样式表引用的字体和图像，可能也会有加载时间）。`href` 属性应该唯一地标识样式表，因为 React 将去重具有相同 `href` 的样式表。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

<SandpackWithHTMLOutput>

Expand Down
Loading