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
+26-27
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,11 @@
1
+
```
1
2
---
2
3
style: "<style>"
3
4
---
4
5
5
6
<Intro>
6
7
7
-
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.
8
+
O [componente `<style>` nativo do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) permite que você adicione folhas de estilo CSS embutidas no seu documento.
8
9
9
10
```js
10
11
<style>{` p { color: red; } `}</style>
@@ -16,57 +17,55 @@ The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/d
16
17
17
18
---
18
19
19
-
## Reference {/*reference*/}
20
+
## Referência {/*reference*/}
20
21
21
22
### `<style>` {/*style*/}
22
23
23
-
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.
24
+
Para adicionar estilos embutidos ao seu documento, renderize o [componente `<style>`nativo 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 elemento DOM correspondente no `<head>` do documento e fará a desduplicação de estilos idênticos.
24
25
25
26
```js
26
27
<style>{` p { color: red; } `}</style>
27
28
```
28
29
29
-
[See more examples below.](#usage)
30
+
[Veja mais exemplos abaixo.](#usage)
30
31
31
32
#### Props {/*props*/}
32
33
33
-
`<style>`supports all [common element props.](/reference/react-dom/components/common#props)
34
+
`<style>`suporta todas as [props de elementos comuns.](/reference/react-dom/components/common#props)
34
35
35
-
*`children`: a string, required. The contents of the stylesheet.
36
-
*`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.
37
-
*`href`: a string. Allows React to [de-duplicate styles](#special-rendering-behavior)that have the same`href`.
38
-
*`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).
39
-
*`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.
40
-
*`title`: a string. Specifies the name of an [alternative stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
36
+
*`children`: uma string, obrigatório. O conteúdo da folha de estilo.
37
+
*`precedence`: uma string. Diz ao React onde classificar o nó`<style>` DOM em relação a outros no `<head>` do documento, o que determina qual folha de estilo pode substituir a outra. React inferirá que valores de precedência que ele descobrir primeiro são "menores" e valores de precedência que ele descobrir mais tarde são "maiores". Muitos sistemas de estilo podem funcionar bem usando um único valor de precedência porque as regras de estilo são atômicas. Folhas de estilo com a mesma precedência vão juntas, sejam elas tags `<link>`ou `<style>`embutidas ou carregadas usando funções [`preinit`](/reference/react-dom/preinit).
38
+
*`href`: uma string. Permite que o React [faça a desduplicação de estilos](#special-rendering-behavior)que têm o mesmo`href`.
39
+
*`media`: uma string. Restringe a folha de estilo a uma determinada[media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
40
+
*`nonce`: uma string. Um [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)criptográfico para permitir o recurso ao usar uma Política de Segurança de Conteúdo estrita.
41
+
*`title`: uma string. Especifica o nome de uma [folha de estilo alternativa](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets).
41
42
42
-
Props that are **not recommended**for use with React:
43
+
Props que **não são recomendadas**para uso com o React:
43
44
44
-
*`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.
45
+
*`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 preciso usando o Suspense.
45
46
46
-
#### Special rendering behavior {/*special-rendering-behavior*/}
47
+
#### Comportamento especial de renderização {/*special-rendering-behavior*/}
47
48
48
-
React can move `<style>`components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense)while the stylesheet is loading.
49
+
O React pode mover componentes `<style>`para o `<head>` do documento, desduplicar folhas de estilo idênticas e [suspender](/reference/react/Suspense)enquanto a folha de estilo está carregando.
49
50
50
-
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.
51
+
Para optar por esse comportamento, forneça as props `href`e`precedence`. O React fará a desduplicação de estilos se eles tiverem o mesmo`href`. A prop precedence diz ao React onde classificar o nó`<style>` DOM em relação a outros no `<head>` do documento, o que determina qual folha de estilo pode substituir a outra.
51
52
52
-
This special treatment comes with two caveats:
53
+
Este tratamento especial vem com duas ressalvas:
53
54
54
-
* React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.)
55
-
*React may leave the style in the DOM even after the component that rendered it has been unmounted.
55
+
* O React ignorará as alterações nas props após o estilo ter sido renderizado. (O React emitirá um aviso no desenvolvimento se isso acontecer.)
56
+
* O React pode deixar o estilo no DOM mesmo depois que o componente que o renderizou foi desmontado.
56
57
57
58
---
58
59
59
-
## Usage {/*usage*/}
60
+
## Uso {/*usage*/}
60
61
61
-
### Rendering an inline CSS stylesheet {/*rendering-an-inline-css-stylesheet*/}
62
+
### Renderizando uma folha de estilo CSS embutida {/*rendering-an-inline-css-stylesheet*/}
62
63
63
-
If a component depends on certain CSS styles in order to be displayed correctly, you can render an inline stylesheet within the component.
64
+
Se um componente depende de certos estilos CSS para ser exibido corretamente, você pode renderizar uma folha de estilo embutida dentro do componente.
64
65
65
-
The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
66
-
If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
66
+
A prop `href` deve identificar de forma exclusiva a folha de estilo, porque o React fará a desduplicação de folhas de estilo que têm o mesmo `href`. Se você fornecer uma prop `precedence`, o React reordenará as folhas de estilo embutidas com base na ordem em que esses valores aparecem na árvore de componentes.
67
67
68
-
Inline stylesheets will not trigger Suspense boundaries while they're loading.
69
-
Even if they load async resources like fonts or images.
68
+
As folhas de estilo embutidas não acionarão limites do Suspense enquanto estiverem carregando. Mesmo que carreguem recursos assíncronos, como fontes ou imagens.
70
69
71
70
<SandpackWithHTMLOutput>
72
71
@@ -100,4 +99,4 @@ export default function App() {
0 commit comments