Skip to content

translate faq-styling.md #320

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

Merged
merged 3 commits into from
Oct 7, 2021
Merged

translate faq-styling.md #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bf8e36a
translate faq-styling.md
alessioitalo Oct 6, 2021
7890c10
fix wording and spaces
alessioitalo Oct 7, 2021
b626d40
Merge branch 'reactjs:main' into ita-translation-faq-css-styling
alessioitalo Oct 7, 2021
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
28 changes: 14 additions & 14 deletions content/docs/faq-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@ layout: docs
category: FAQ
---

### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components}
### Come posso aggiungere una classe CSS al mio componente? {#how-do-i-add-css-classes-to-components}

Pass a string as the `className` prop:
Puoi utilizzare l'apposita prop `className`, e passare al suo interno una stringa con il nome della classe che vuoi utilizzare.

```jsx
render() {
return <span className="menu navigation-menu">Menu</span>
}
```

It is common for CSS classes to depend on the component props or state:
Una pratica comune è quella di applicare o rimuovere classi CSS in base allo state o alle props del componente:

```jsx
render() {
Expand All @@ -28,24 +28,24 @@ render() {
}
```

>Tip
>Suggerimento
>
>If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it.
>Se ti ritrovi spesso a scrivere codice in questo modo, il package [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) potrebbe esserti utile.

### Can I use inline styles? {#can-i-use-inline-styles}
### Posso utilizzare inline styling? {#can-i-use-inline-styles}

Yes, see the docs on styling [here](/docs/dom-elements.html#style).
Si, consulta la documentazione a riguardo [qui](/docs/dom-elements.html#style).

### Are inline styles bad? {#are-inline-styles-bad}
### Utilizzare inline styling è una cattiva idea? {#are-inline-styles-bad}

CSS classes are generally better for performance than inline styles.
In linea di massima, l'utilizzo di classi comporta una performance migliore rispetto all'inline styling.

### What is CSS-in-JS? {#what-is-css-in-js}
### Che cos'è 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.
Con "CSS-in-JS" si intende la pratica di definire styling CSS direttamente all'interno di un file JavaScript, anziché utilizzare dei file esterni.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

_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).
_Tieni presente che questa funzionalità non è parte di React, ma è fornita da librerie esterne._ React non fornisce particolari indicazioni su come e dove definire lo styling. Nel dubbio, un buon punto di partenza é quello di definire il tuo styling in un file `*.css` separato, ed utilizzare cio che é definito al suo interno tramite [`className`](/docs/dom-elements.html#classname).

### Can I do animations in React? {#can-i-do-animations-in-react}
### Posso utilizzare animazioni in 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) or [React Spring](https://github.com/react-spring/react-spring), for example.
React può essere utilizzato per qualsiasi tipo di animazione. Prova a dare un'occhiata a [React Transition Group](https://reactcommunity.org/react-transition-group/), [React Motion](https://github.com/chenglou/react-motion) o [React Spring](https://github.com/react-spring/react-spring).
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13218,6 +13218,11 @@ prismjs@^1.25.0, prismjs@^1.6.0:
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==

private@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==

probe-image-size@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-5.0.0.tgz#1b87d20340ab8fcdb4324ec77fbc8a5f53419878"
Expand Down