I superamento del materiale-ui reagiscono alle regole delle emozioni: reactjs, material-ui, create-react-app, emotion

Nel mio progetto uso i componenti Material-ui insieme a reagire-emozione.

Lascia che ti faccia un esempio problematico. Ho questo elemento:

<CardHeader title={stat} classes={{ root: statNumber }}/>

dove

const statNumber = css`padding: 0;`

in questo modo riesco a sostituire il padding predefinito (16px) di CardHeader con 0 che è mia intenzione.

Nella modalità di sviluppo tutto funziona come previsto, ma in produzione il padding: 0 regola viene sovrascritto dal padding predefinito 16px.

Il motivo per cui ciò accade è che in modalità di sviluppo gli stili vengono aggiunti in modo dinamico nell'intestazione. Prima arrivano gli stili Material-UI e poi gli stili di emozione. Come questo:

Ma nella produzione gli stili sono disposti al contrario

Questo è il motivo per cui gli stili vengono ignorati in modalità produzione.

Il materiale dell'interfaccia utente fornisce una spiegazione al riguardo https://material-ui-next.com/customization/css-in-js/#css-injection-order

ma con la soluzione proposta non posso cambiare l'ordine delle emozioni e gli stili material-ui sono ordinati. Posso solo cambiare l'interfaccia utente del materiale e spostarla ulteriormente verso il basso

Qualcuno ha un'idea di come risolvere questo ??

risposte:

5 per risposta № 1

Il problema è stato risolto modificando l'ordine di rendering delle regole di stile. Ho creato un wrapper che deve avvolgere l'intera app.

import React from "react"
import { create } from "jss"
import JssProvider from "react-jss/lib/JssProvider"
import { createGenerateClassName, jssPreset } from "material-ui/styles"

const styleNode = document.createElement("style")
styleNode.id = "insertion-point-jss"
document.head.insertBefore(styleNode, document.head.firstChild)

// Configure JSS
const jss = create(jssPreset())
jss.options.createGenerateClassName = createGenerateClassName
jss.options.insertionPoint = document.getElementById("insertion-point-jss")

function Provider (props) {
return <JssProvider jss={jss}>{props.children}</JssProvider>
}

export default Provider

Il wrapper crea un elemento come primo figliodentro la testa. Tutti gli stili di interfaccia utente materiali vengono istruiti per essere collocati lì, quindi sono i primi in ordine e possono essere sovrascritti dalle regole di emozione che verranno dopo.

---