You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/style.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,13 +5,13 @@ canary: true
5
5
6
6
<Canary>
7
7
8
-
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).
8
+
As extensões do React para `<style>`estão atualmente disponíveis apenas nos canais canário e experimental do React. Em versões estáveis do React,`<style>`funciona apenas como um [componente HTML padrão do navegador](https://react.dev/reference/react-dom/components#all-html-components). Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels).
9
9
10
10
</Canary>
11
11
12
12
<Intro>
13
13
14
-
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.
14
+
O [componente `<style>`padrão do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)permite que você adicione folhas de estilo CSS inline ao seu documento.
15
15
16
16
```js
17
17
<style>{` p { color: red; } `}</style>
@@ -23,53 +23,53 @@ The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/d
23
23
24
24
---
25
25
26
-
## Reference {/*reference*/}
26
+
## Referência {/*reference*/}
27
27
28
28
### `<style>` {/*style*/}
29
29
30
-
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.
30
+
Para adicionar estilos inline ao seu documento, renderize o [componente `<style>`padrão do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style). Você pode renderizar`<style>`de qualquer componente e o React [em certos casos](#special-rendering-behavior)colocará o correspondente elemento DOM no cabeçalho do documento e deduplicará estilos idênticos.
31
31
32
32
```js
33
33
<style>{` p { color: red; } `}</style>
34
34
```
35
35
36
-
[See more examples below.](#usage)
36
+
[Veja mais exemplos abaixo.](#usage)
37
37
38
38
#### Props {/*props*/}
39
39
40
-
`<style>`supports all [common element props.](/reference/react-dom/components/common#props)
40
+
`<style>`suporta todas as [props de elemento comuns.](/reference/react-dom/components/common#props)
41
41
42
-
*`children`: a string, required. The contents of the stylesheet.
43
-
*`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.
44
-
*`href`: a string. Allows React to [de-duplicate styles](#special-rendering-behavior)that have the same`href`.
45
-
*`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).
46
-
*`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.
47
-
*`title`: a string. Specifies the name of an [alternative stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
42
+
*`children`: uma string, obrigatória. O conteúdo da folha de estilo.
43
+
*`precedence`: uma string. Diz ao React onde classificar o nó DOM `<style>`em relação a outros no `<head>` do documento, o que determina qual folha de estilo pode sobrescrever a outra. Seu valor pode ser (em ordem de precedência) `"reset"`, `"low"`, `"medium"`, `"high"`. Folhas de estilo com a mesma precedência vão juntas, independentemente de serem tags `<link>`ou `<style>`inline ou carregadas usando as funções [`preload`](/reference/react-dom/preload)ou[`preinit`](/reference/react-dom/preinit).
44
+
*`href`: uma string. Permite que o React [deduplicate estilos](#special-rendering-behavior)que têm o mesmo`href`.
45
+
*`media`: uma string. Restringe a folha de estilo a uma certa [consulta de mídia](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
46
+
*`nonce`: uma string. Um [nonce criptográfico para permitir o recurso](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)ao usar uma Política de Segurança de Conteúdo rígida.
47
+
*`title`: uma string. Especifica o nome de uma [folha de estilo alternativa](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
48
48
49
-
Props that are **not recommended**for use with React:
49
+
Props que **não são recomendadas**para uso com o React:
50
50
51
-
*`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.
51
+
*`blocking`: uma string. Se definido como`"render"`, instrui o navegador a não renderizar a página até que a folha de estilo seja carregada. O React fornece um controle mais refinado usando Suspense.
52
52
53
-
#### Special rendering behavior {/*special-rendering-behavior*/}
53
+
#### Comportamento de renderização especial {/*special-rendering-behavior*/}
54
54
55
-
React can move `<style>`components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense)while the stylesheet is loading.
55
+
O React pode mover componentes `<style>`para o `<head>` do documento, deduplicar folhas de estilo idênticas e [suspender](/reference/react/Suspense)enquanto a folha de estilo está sendo carregada.
56
56
57
-
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.
57
+
Para optar por esse comportamento, forneça as props `href`e`precedence`. O React deduplicará estilos se eles tiverem o mesmo `href`. A prop de precedência diz ao React onde classificar o nó DOM `<style>`em relação a outros no `<head>` do documento, o que determina qual folha de estilo pode sobrescrever a outra.
58
58
59
-
This special treatment comes with two caveats:
59
+
Esse tratamento especial vem com duas ressalvas:
60
60
61
-
* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
62
-
* React may leave the style in the DOM even after the component that rendered it has been unmounted.
61
+
*O React ignorará alterações nas props após o estilo ter sido renderizado. (O React emitirá um aviso em desenvolvimento se isso acontecer.)
62
+
*O React pode deixar o estilo no DOM mesmo após o componente que o renderizou ter sido desmontado.
63
63
64
64
---
65
65
66
-
## Usage {/*usage*/}
66
+
## Uso {/*usage*/}
67
67
68
-
### Rendering an inline CSS stylesheet {/*rendering-an-inline-css-stylesheet*/}
68
+
### Renderizando uma folha de estilo CSS inline {/*rendering-an-inline-css-stylesheet*/}
69
69
70
-
If a component depends on certain CSS styles in order to be displayed correctly, you can render an inline stylesheet within the component.
70
+
Se um componente depende de certos estilos CSS para ser exibido corretamente, você pode renderizar uma folha de estilo inline dentro do componente.
71
71
72
-
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`.
72
+
Se você fornecer uma prop `href`e`precedence`, seu componente será suspenso enquanto a folha de estilo está sendo carregada. (Mesmo com folhas de estilo inline, pode haver um tempo de carregamento devido a fontes e imagens às quais a folha de estilo se refere.) A prop `href`deve identificar exclusivamente a folha de estilo, porque o React deduplicará folhas de estilo que tenham o mesmo`href`.
73
73
74
74
<SandpackWithHTMLOutput>
75
75
@@ -103,4 +103,4 @@ export default function App() {
0 commit comments