Skip to content

docs: style component translation (#689) #809

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

Open
TraFost wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: style component translation (#689) #809

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
56 changes: 28 additions & 28 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 @@ -4,7 +4,7 @@ style: "<style>"

<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.
Komponen [bawaan browser `<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) memungkinkan Anda menambahkan stylesheet CSS inline ke dokumen Anda.

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

---

## Reference {/*reference*/}
## Referensi {/*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.
Untuk menambahkan gaya inline ke dokumen Anda, render [komponen bawaan browser `<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style). Anda dapat merender `<style>` dari komponen apa pun dan React akan, [dalam kasus tertentu](#special-rendering-behavior), menempatkan elemen DOM yang sesuai di head dokumen serta menghapus duplikasi gaya yang identik.

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

[See more examples below.](#usage)
[Lihat contoh lainnya di bawah.](#usage)

#### Props {/*props*/}
#### Properti {/*props*/}

`<style>` supports all [common element props.](/reference/react-dom/components/common#props)
`<style>` mendukung semua [properti elemen umum.](/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. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are `<link>` or inline `<style>` tags or loaded using [`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 stylesheet 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`: string, wajib. Isi stylesheet.
* `precedence`: string. Memberi tahu React peringkat node DOM `<style>` relatif terhadap yang lain di `<head>` dokumen, yang menentukan stylesheet mana yang dapat menimpa yang lain. React akan menyimpulkan bahwa nilai precedence yang ditemukannya lebih awal lebih "rendah" dan nilai precedence yang ditemukannya lebih belakangan lebih "tinggi". Banyak sistem gaya dapat bekerja dengan baik menggunakan satu nilai precedence karena aturan gaya bersifat atomik. Stylesheet dengan precedence yang sama akan dikelompokkan bersama, baik berupa `<link>` maupun tag `<style>` inline atau dimuat menggunakan fungsi [`preinit`](/reference/react-dom/preinit).
* `href`: string. Memungkinkan React [menghapus duplikasi gaya](#special-rendering-behavior) yang memiliki `href` yang sama.
* `media`: string. Membatasi stylesheet pada [kueri media](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) tertentu.
* `nonce`: string. [Nonce kriptografis untuk mengizinkan resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) saat menggunakan Content Security Policy yang ketat.
* `title`: string. Menentukan nama [stylesheet alternatif](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).

Props that are **not recommended** for use with React:
Properti yang **tidak direkomendasikan** untuk digunakan dengan 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`: string. Jika diatur ke `"render"`, browser diperintahkan untuk tidak merender halaman sampai stylesheet dimuat. React menyediakan kontrol yang lebih terperinci menggunakan Suspense.

#### Special rendering behavior {/*special-rendering-behavior*/}
#### Perilaku rendering khusus {/*special-rendering-behavior*/}

React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense) while the stylesheet is loading.
React dapat memindahkan komponen `<style>` ke `<head>` dokumen, menghapus duplikasi stylesheet yang identik, dan [menangguhkan](/reference/react/Suspense) saat stylesheet sedang dimuat.

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.
Untuk mengaktifkan perilaku ini, berikan properti `href` dan `precedence`. React akan menghapus duplikasi gaya jika memiliki `href` yang sama. Properti precedence memberi tahu React peringkat node DOM `<style>` relatif terhadap yang lain di `<head>` dokumen, yang menentukan stylesheet mana yang dapat menimpa yang lain.

This special treatment comes with two caveats:
Perlakuan khusus ini disertai beberapa catatan:

* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
* React will drop all extraneous props when using the `precedence` prop (beyond `href` and `precedence`).
* React may leave the style in the DOM even after the component that rendered it has been unmounted.
* React akan mengabaikan perubahan properti setelah gaya dirender. (React akan mengeluarkan peringatan dalam mode pengembangan jika hal ini terjadi.)
* React akan menghapus semua properti tambahan ketika menggunakan properti `precedence` (selain `href` dan `precedence`).
* React dapat membiarkan gaya tetap berada di DOM bahkan setelah komponen yang merendernya di-unmount.

---

## Usage {/*usage*/}
## Penggunaan {/*usage*/}

### Rendering an inline CSS stylesheet {/*rendering-an-inline-css-stylesheet*/}
### Merender stylesheet CSS inline {/*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.
Jika sebuah komponen bergantung pada gaya CSS tertentu agar ditampilkan dengan benar, Anda dapat merender stylesheet inline di dalam komponen.

The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
Properti `href` harus mengidentifikasi stylesheet secara unik, karena React akan menghapus duplikasi stylesheet yang memiliki `href` yang sama.
Jika Anda memberikan properti `precedence`, React akan mengurutkan ulang stylesheet inline berdasarkan urutan kemunculan nilai-nilai ini dalam pohon komponen.

Inline stylesheets will not trigger Suspense boundaries while they're loading.
Even if they load async resources like fonts or images.
Stylesheet inline tidak akan memicu batas Suspense saat sedang dimuat.
Bahkan jika mereka memuat resource async seperti font atau gambar

<SandpackWithHTMLOutput>

Expand Down