{"id":73932,"date":"2023-10-16T19:33:40","date_gmt":"2023-10-16T18:33:40","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=73932&#038;post_type=knowledgebase&#038;preview_id=73932"},"modified":"2025-10-01T20:43:05","modified_gmt":"2025-10-01T19:43:05","slug":"jss","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/jss\/","title":{"rendered":"Modificare lo stile di un sito web React con JSS"},"content":{"rendered":"<p>Lo styling permette di definire l&#8217;aspetto di un sito web e di creare un branding elegante e coeso. Sebbene molti approcci utilizzino i fogli di stile a cascata (CSS) per creare lo stile delle pagine web, le soluzioni <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">basate su JavaScript<\/a> sono pi\u00f9 flessibili e offrono un maggiore controllo rispetto ai CSS standard.<\/p>\n<p>Un metodo molto diffuso \u00e8 quello di utilizzare i fogli di stile JavaScript (JSS), che permette di scrivere gli stili CSS in JavaScript. JSS presenta diversi vantaggi, tra cui l&#8217;utilizzo di variabili, espressioni JavaScript e funzioni per creare stili e temi dinamici.<\/p>\n<p>Questo articolo spiega come funziona JSS, i suoi vantaggi e come utilizzarlo nelle applicazioni JavaScript. Inoltre parla di stile dinamico, tematizzazione e ottimizzazione delle prestazioni. \u00c8 possibile usare JSS con molti tipi di applicazioni, ma in questo articolo ci concentreremo su JSS per React.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Cos&#8217;\u00e8 JSS?<\/h2>\n<p>Con JSS si possono scrivere gli stili CSS come oggetti JavaScript e utilizzare questi oggetti come nomi di classi negli elementi o nei componenti. JSS \u00e8 indipendente dal framework, quindi \u00e8 possibile usarlo in JavaScript puro o con framework come <a href=\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\">React<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-componenti-angular\/\">Angular<\/a>.<\/p>\n<p>JSS presenta diversi vantaggi rispetto allo stile CSS tradizionale:<\/p>\n<ul>\n<li><strong>Stile dinamico<\/strong>: con JSS \u00e8 possibile manipolare gli stili in base alle interazioni dell&#8217;utente o a valori come i props o il contesto. Le funzioni JavaScript aiutano a generare dinamicamente gli stili nel browser in base allo stato dell&#8217;applicazione, ai dati esterni o alle API del browser.<\/li>\n<\/ul>\n<ul>\n<li><strong>Migliori funzionalit\u00e0 di tematizzazione<\/strong>: si possono creare stili specifici per un particolare tema utilizzando JSS. Ad esempio, potrete creare stili per un tema chiaro e scuro e poi applicare questi stili specifici all&#8217;intera applicazione in base alle preferenze dell&#8217;utente. Se utilizzate React, il pacchetto <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\">React-JSS<\/a> supporta la propagazione dei temi basata sul contesto. Potete definire e gestire il tema in un unico punto prima di passare le informazioni sul tema lungo l&#8217;albero dei componenti utilizzando un fornitore di temi.<\/li>\n<\/ul>\n<ul>\n<li><strong>Migliore manutenibilit\u00e0<\/strong>: definendo gli stili in oggetti JavaScript, potete raggruppare gli stili correlati in un&#8217;unica posizione e importarli nell&#8217;applicazione quando necessario. Questo approccio riduce la duplicazione del codice e ne migliora l&#8217;organizzazione, rendendo pi\u00f9 facile la manutenzione degli stili nel tempo.<\/li>\n<\/ul>\n<ul>\n<li><strong>CSS reali<\/strong>: JSS genera CSS reali anzich\u00e9 stili in linea che possono essere disordinati e difficili da gestire. JSS utilizza nomi di classi univoci per impostazione predefinita, il che aiuta a evitare collisioni di denominazione causate dalla natura globale dei CSS.<\/li>\n<\/ul>\n<h2>Come scrivere gli stili con JSS<\/h2>\n<p>Questo articolo si basa su un progetto React. Utilizza il pacchetto <code>react-jss<\/code>, che integra JSS con React utilizzando l&#8217;API <code>Hooks<\/code>. <code>react-jss<\/code> viene fornito con i plugin predefiniti e permette di utilizzare JSS con una configurazione minima.<\/p>\n<h3>Sintassi di base e uso di JSS in React<\/h3>\n<p>Per utilizzare JSS in React, dovrete innanzitutto installare il pacchetto <code>react-jss<\/code> utilizzando un gestore di pacchetti come npm o Yarn.<\/p>\n<p>La sintassi per scrivere gli stili in JSS prevede la definizione di regole CSS per elementi specifici all&#8217;interno di un oggetto <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. Ad esempio, il codice seguente definisce gli stili per un pulsante in un&#8217;applicazione React.<\/p>\n<pre><code class=\"language-js\">\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};<\/code><\/pre>\n<p><strong>Nota: <\/strong>le propriet\u00e0 CSS sono in camelcase.<\/p>\n<p>Per applicare questi stili a un elemento HTML:<\/p>\n<ol start=\"1\">\n<li>Generate le classi passando gli stili al metodo <code>createUseStyles()&lt;\/code method from <code>react-jss<\/code>:<\/code><\/li>\n<\/ol>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\";\nconst styles = {\n       button: {\n             padding: \"10px 20px\",\n             background: \"#f7df1e\",\n             textAlign: \"center\",\n             border:\"none\"\n       }\n};\nconst useStyles = createUseStyles(styles);<\/code><\/pre>\n<ol start=\"2\">\n<li>Applicate il CSS all&#8217;elemento pulsante utilizzando il nome della classe generata:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const App = () = &gt; {\n      const classes = useStyles();\n      return (\n            &lt; button className={classes.button} &gt; &lt;\/button &gt;\n      );\n};<\/code><\/pre>\n<p>Questo codice crea un componente React e applica gli stili nell&#8217;oggetto <code>styles<\/code>.<\/p>\n<h3>Come gestire le pseudo-classi, le media query e i keyframe<\/h3>\n<p>JSS supporta tutte le funzioni CSS esistenti, comprese le pseudo-classi, le media queries e i keyframes. Per definire gli stili di queste caratteristiche, usa la stessa sintassi delle normali regole di stile CSS.<\/p>\n<h4>Pseudo-classi<\/h4>\n<p>Ad esempio, supponiamo di voler aggiungere una pseudo-classe hover al pulsante per cambiare il colore dello sfondo quando l&#8217;utente ci passa sopra con il mouse. Il codice seguente implementa questa pseudo-classe in modo che lo sfondo del pulsante diventi verde chiaro al passaggio del mouse:<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\",\n            '&:hover': {\n                  backgroundColor: 'lightgreen',\n            }\n     }\n};<\/code><\/pre>\n<h4>Keyframes<\/h4>\n<p>Allo stesso modo, potete applicare un&#8217;animazione keyframe a un componente utilizzando la regola <code>@keyframes<\/code>. Ad esempio, di seguito \u00e8 riportato un oggetto di stile per un componente che ruota.<\/p>\n<pre><code class=\"language-js\">const styles = {\n       '@keyframes spin': {\n             '0%': {\n                   transform: 'rotate(0deg)',\n             },\n             '100%': {\n                   transform: 'rotate(360deg)',\n             },\n       },\n       spinner: {\n              width: \"100px\",\n              height: \"100px\",\n              backgroundColor: \"lightgreen\",\n              animation: '$spin 1s linear infinite',\n       },\n}<\/code><\/pre>\n<p>All&#8217;interno della funzione stili, avete definito un&#8217;animazione keyframe denominata <code>spin<\/code> utilizzando la regola <code>@keyframes<\/code>. Quindi, create una classe chiamata <code>spinner<\/code> che applica l&#8217;animazione utilizzando la sintassi <code>$<\/code> per fare riferimento all&#8217;animazione keyframe.<\/p>\n<h4>Media query<\/h4>\n<p>Anche le <a href=\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\">media query<\/a> utilizzano la solita sintassi CSS in JSS. Ad esempio, per modificare la dimensione del carattere di un pulsante in una determinata dimensione dello schermo, usate i seguenti stili:<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            fontSize: \"12px\",\n            '@media (max-width: 768px)': {\n                  fontSize: '34px',\n            },\n      }\n};<\/code><\/pre>\n<p>Come avete appena visto, scrivere stili in JSS non \u00e8 poi cos\u00ec diverso dallo scrivere semplici CSS. Tuttavia, il suo vantaggio \u00e8 che potete sfruttare la potenza di JavaScript per rendere gli stili dinamici.<\/p>\n<h2>Stili dinamici con JSS<\/h2>\n<p>Stile dinamico significa creare degli stili che cambiano in risposta a condizioni specifiche. In React, gli stili possono cambiare in base a valori come lo stato, gli oggetti di scena e il contesto del componente.<\/p>\n<h3>Come creare stili dinamici con JSS<\/h3>\n<p>In JSS \u00e8 possibile applicare in modo condizionale gli stili agli elementi con espressioni JavaScript per creare regole di stile dinamiche.<\/p>\n<p>Supponiamo di avere un pulsante che riceve un oggetto chiamato <code>bgColor<\/code>. Il suo valore \u00e8 il colore di sfondo del pulsante. Per creare una regola di stile che cambi il colore di sfondo del pulsante in base al prop, passate il prop al metodo <code>useStyles<\/code>.<\/p>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\"\n\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: props = &gt;props.bgColor,\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};\nconst Button = ({...props}) =&gt; {\n  \n      const useStyles = createUseStyles(styles);\n      const classes = useStyles({...props});\n      return (\n            &lt;button className={classes.button}&gt;Button &lt;\/button&gt;\n      );\n};<\/code><\/pre>\n<p>Poi, potete fare riferimento ai prop nell&#8217;oggetto styles. L&#8217;esempio precedente fa riferimento a <code>props.bgColor<\/code>.<\/p>\n<p>Potete passare il colore di sfondo che desiderate quando renderizzate il componente. Il componente qui sotto renderizza due componenti <code>Button<\/code> con i colori di sfondo <code>lightgreen<\/code> e <code>yellow<\/code>.<\/p>\n<pre><code class=\"language-js\">export default function App() {\n  return (\n    &lt;div &gt;\n      &lt;Button bgColor=\"lightgreen\" \/&gt;\n      &lt;div style={{ marginTop: \"10px\" }}&gt;&lt;\/div&gt;\n      &lt;Button bgColor=\"yellow\" \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<figure style=\"width: 1838px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image1.png\" alt=\"Due pulsanti stilizzati dinamicamente con JSS\" width=\"1838\" height=\"462\"><figcaption class=\"wp-caption-text\">Due pulsanti stilizzati dinamicamente con JSS<\/figcaption><\/figure>\n<p>Ogni volta che eseguite il rendering del componente <code>Button<\/code>, potete stilizzare lo sfondo a vostro piacimento.<\/p>\n<p>Potete anche cambiare gli stili in base allo stato del componente. Supponiamo di avere un menu di navigazione con diversi link. Per evidenziare il link della pagina corrente, definite un valore di stato chiamato <code>isActive<\/code> che tiene traccia del fatto che un link del menu sia attivo.<\/p>\n<p>Potete quindi utilizzare un operatore ternario JavaScript per verificare il valore di <code>isActive<\/code>, impostando il colore del link in blu se lo stato \u00e8 <code>true<\/code> e in rosso se <code>false<\/code>.<\/p>\n<pre><code class=\"language-js\">const styles = {\n      a: {\n             color: ({ isActive }) =&gt; isActive ? 'blue' : 'red',\n             padding: '10px',\n      },\n};<\/code><\/pre>\n<p>Ora i link attivi diventano blu, mentre quelli inattivi diventano rossi.<\/p>\n<p>Allo stesso modo, potete creare uno stile dinamico basato sul contesto. Potete creare uno stile per un elemento, come <code>UserContext<\/code>, in base al valore di un contesto che memorizza lo stato online dell&#8217;utente.<\/p>\n<pre><code class=\"language-js\">const { online } = useContext(UserContext);\nconst styles = {\n      status: {\n            background: online ? 'lightgreen' : '',\n            width: '20px',\n            height: '20px',\n            borderRadius: \"50%\",\n            display: online ? 'flex' : 'hidden'\n      },\n};<\/code><\/pre>\n<p>In questo esempio, l&#8217;elemento ha uno sfondo verde se l&#8217;utente \u00e8 online. Impostate la propriet\u00e0 <code>display<\/code> a <code>flex<\/code> se l&#8217;utente \u00e8 online e a <code>hidden<\/code> se l&#8217;utente \u00e8 offline.<\/p>\n<h3>Casi d&#8217;uso dello stile dinamico<\/h3>\n<p>Lo stile dinamico \u00e8 una potente funzione di JSS che ha molti casi d&#8217;uso:<\/p>\n<ul>\n<li><strong>Theming<\/strong>: potete definire degli stili basati su un oggetto tema, ad esempio un tema chiaro e un tema scuro, e passarli ai componenti come valore di prop o di contesto.<\/li>\n<li><strong>Rendering condizionato<\/strong>: JSS permette di definire gli stili in base a valori specifici. Potete creare stili che si applicano solo in determinate condizioni, ad esempio quando un pulsante \u00e8 disabilitato, un campo di testo \u00e8 in stato di errore, un menu di navigazione laterale \u00e8 aperto o quando un utente \u00e8 online.<\/li>\n<li><strong>Design reattivo<\/strong>: potete utilizzare lo stile dinamico in JSS per modificare lo stile di un elemento in base alla larghezza del viewport. Ad esempio, potete definire una serie di stili per un breakpoint specifico utilizzando le media queries e applicarli in modo condizionato in base alle dimensioni dello schermo.<\/li>\n<\/ul>\n<h2>Come usare i temi con JSS<\/h2>\n<p>Utilizzate i temi per creare un&#8217;interfaccia utente coerente in tutta l&#8217;applicazione. \u00c8 facile creare temi in JSS: basta definire un oggetto tema con valori di stile globali, come colori, tipografia e spaziatura. Ad esempio:<\/p>\n<pre><code class=\"language-js\">const theme = {\n      colors: {\n            primary: '#007bff',\n            secondary: '#6c757d',\n            light: '#f8f9fa',\n            dark: '#343a40',\n       },\n       typography: {\n             fontFamily: 'Helvetica, Arial, sans-serif',\n             fontSize: '16px',\n             fontWeight: 'normal',\n       },\n       spacing: {\n             small: '16px',\n             medium: '24px',\n             large: '32px',\n       },\n};<\/code><\/pre>\n<p>Per applicare i temi ai componenti, usate i context provider. La libreria JSS fornisce un componente <code>ThemeProvider<\/code> che potete avvolgere intorno ai componenti che devono accedere al tema.<\/p>\n<p>L&#8217;esempio seguente avvolge il componente <code>Button<\/code> con il componente <code>ThemeProvider<\/code> e passa l&#8217;oggetto <code>theme<\/code> come prop.<\/p>\n<pre><code class=\"language-js\">import { ThemeProvider } from \"react-jss\";\nconst App = () =&gt; (\n      &lt;ThemeProvider theme={theme}&gt;\n            &lt;Button \/&gt;\n      &lt;\/ThemeProvider&gt;\n)<\/code><\/pre>\n<p>Potete accedere al tema nel componente <code>Button<\/code> utilizzando un hook <code>useTheme()<\/code> e passarlo all&#8217;oggetto <code>useStyles<\/code>. L&#8217;esempio seguente utilizza gli stili definiti nell&#8217;oggetto tema per creare un pulsante primario.<\/p>\n<pre><code class=\"language-js\">import { useTheme } from \u201creact-jss\u201d\n\nconst useStyles = createUseStyles({\n  primaryButton: {\n    background: ({ theme }) =&gt; theme.colors.primary,\n    font: ({ theme }) =&gt; theme.typography.fontFamily,\n    fontSize: ({ theme }) =&gt; theme.typography.fontSize,\n    padding: ({ theme }) =&gt; theme.spacing.medium\n  }\n});\n\nconst Button = () =&gt; {\n      const theme = useTheme()\n      const classes = useStyles({theme})\n      return (\n            &lt;div&gt;\n              &lt;button className={classes.primaryButton}&gt; Primary Button &lt;\/button&gt;\n            &lt;\/div&gt;\n\n      )\n}<\/code><\/pre>\n<p>Il pulsante dovrebbe assomigliare all&#8217;immagine sottostante, con un testo nero su un pulsante rettangolare blu.<\/p>\n<figure style=\"width: 1823px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image3.png\" alt=\"Uno stile di pulsante primario basato sul tema.\" width=\"1823\" height=\"194\"><figcaption class=\"wp-caption-text\">Uno stile di pulsante primario basato sul tema.<\/figcaption><\/figure>\n<p>Cambiando uno dei valori dell&#8217;oggetto tema, verrebbero automaticamente attivati nuovi stili da applicare a tutti i componenti avvolti dal componente <code>ThemeProvider<\/code>. Se cambiate il valore del colore primario in <code>lightgreen<\/code>, anche il colore del pulsante diventa verde chiaro, come nell&#8217;immagine qui sotto.<\/p>\n<figure style=\"width: 1744px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image2.png\" alt=\"Il colore primario del pulsante si adatta al tema.\" width=\"1744\" height=\"191\"><figcaption class=\"wp-caption-text\">Il colore primario del pulsante si adatta al tema.<\/figcaption><\/figure>\n<p>Ecco alcune linee guida da seguire per la creazione dei temi:<\/p>\n<ul>\n<li>Definire l&#8217;oggetto tema in un file separato per mantenere il codice organizzato e facile da mantenere.<\/li>\n<li>Usare nomi descrittivi per i valori di stile per rendere l&#8217;oggetto tema facile da leggere e da aggiornare.<\/li>\n<li>Usare le variabili CSS per definire i valori usati spesso nel CSS.<\/li>\n<li>Creare dei valori predefiniti per tutte le propriet\u00e0 di stile per mantenere un design coerente in tutta l&#8217;applicazione.<\/li>\n<li>Testare accuratamente i temi per assicurarsi che funzionino come previsto su tutti i dispositivi e i browser.<\/li>\n<\/ul>\n<p>Seguendo queste best practice, creerete un tema semplice da usare e facile da aggiornare man mano che l&#8217;applicazione cresce.<\/p>\n<h2>Prestazioni e ottimizzazione<\/h2>\n<p>JSS \u00e8 una soluzione di styling performante. Con JSS, solo gli stili attualmente utilizzati sullo schermo vengono aggiunti al Document Object Model (DOM), riducendo cos\u00ec le dimensioni del DOM e velocizzando il rendering. Inoltre JSS memorizza nella cache gli stili renderizzati, il che significa che JSS compila il CSS solo una volta, migliorando ulteriormente le prestazioni.<\/p>\n<p>Potete usufruire di ulteriori ottimizzazioni delle prestazioni utilizzando il pacchetto <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\"><code>react-jss<\/code><\/a> invece del pacchetto <a href=\"https:\/\/github.com\/cssinjs\"><code>JSS<\/code><\/a> principale. Ad esempio, <code>react-jss<\/code> rimuove i fogli di stile quando il componente viene smontato. Inoltre, gestisce l&#8217;estrazione critica dei CSS ed estrae gli stili solo dai componenti renderizzati. In questo modo il pacchetto <code>react-jss<\/code> riduce le dimensioni del bundle CSS e migliora i tempi di caricamento.<\/p>\n<p>Per ridurre ulteriormente le dimensioni del bundle CSS, usate il code splitting per caricare solo il CSS di cui ha bisogno una pagina o un componente specifico. Una libreria come <code>loadable-components<\/code> pu\u00f2 semplificare le operazioni di code splitting.<\/p>\n<p>JSS permette anche di generare CSS lato server. Potete aggregare e convertire in stringa il CSS allegato utilizzando la classe di registro <code>StyleSheet<\/code> di JSS, quindi inviare i componenti renderizzati e la stringa CSS al client. Dopo l&#8217;avvio dell&#8217;applicazione, il CSS statico non \u00e8 pi\u00f9 necessario e potrete rimuoverlo, riducendo le dimensioni del bundle.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Abbiamo visto le basi della sintassi JSS, come creare e applicare oggetti di stile ai componenti e come creare stili dinamici. Adesso sappiamo anche come utilizzare il componente <code>ThemeProvider<\/code> per applicare temi e migliorare le prestazioni in JSS. Ora potete usare JSS per creare stili riutilizzabili, manutenibili e dinamici che si adattano a varie condizioni.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lo styling permette di definire l&#8217;aspetto di un sito web e di creare un branding elegante e coeso. Sebbene molti approcci utilizzino i fogli di stile &#8230;<\/p>\n","protected":false},"author":290,"featured_media":73933,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26212,25847],"class_list":["post-73932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-tutorial-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Modifica lo stile del tuo sito web React con JSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/jss\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modificare lo stile di un sito web React con JSS\" \/>\n<meta property=\"og:description\" content=\"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/jss\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-16T18:33:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:43:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Modificare lo stile di un sito web React con JSS\",\"datePublished\":\"2023-10-16T18:33:40+00:00\",\"dateModified\":\"2025-10-01T19:43:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/\"},\"wordCount\":1828,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/jss\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/jss\/\",\"name\":\"Modifica lo stile del tuo sito web React con JSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg\",\"datePublished\":\"2023-10-16T18:33:40+00:00\",\"dateModified\":\"2025-10-01T19:43:05+00:00\",\"description\":\"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/jss\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/jss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Modificare lo stile di un sito web React con JSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Modifica lo stile del tuo sito web React con JSS - Kinsta\u00ae","description":"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/jss\/","og_locale":"it_IT","og_type":"article","og_title":"Modificare lo stile di un sito web React con JSS","og_description":"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.","og_url":"https:\/\/kinsta.com\/it\/blog\/jss\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-10-16T18:33:40+00:00","article_modified_time":"2025-10-01T19:43:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Marcia Ramos","Tempo di lettura stimato":"13 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/jss\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Modificare lo stile di un sito web React con JSS","datePublished":"2023-10-16T18:33:40+00:00","dateModified":"2025-10-01T19:43:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/jss\/"},"wordCount":1828,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/jss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/jss\/","url":"https:\/\/kinsta.com\/it\/blog\/jss\/","name":"Modifica lo stile del tuo sito web React con JSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg","datePublished":"2023-10-16T18:33:40+00:00","dateModified":"2025-10-01T19:43:05+00:00","description":"Scopri come funziona JSS, i suoi vantaggi, come creare un sito web React con JSS e come utilizzarlo nelle tue applicazioni JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/jss\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/10\/jss.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/jss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Modificare lo stile di un sito web React con JSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/it\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/73932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=73932"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/73932\/revisions"}],"predecessor-version":[{"id":77362,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/73932\/revisions\/77362"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/73932\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/73933"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=73932"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=73932"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=73932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}