Stile in linea React.js - Come stile Componente da node_modules - javascript, css, reactjs

Attualmente sto usando Draft.js nella mia app React. Viene caricato tramite node_modules e quindi utilizzato in un componente, ad esempio:

import { Editor } from "draft-js"

...

class MyComponent extends React.Component {
render() {
return(
<div>
<h1
style={ styles.header }
>Some header</h1>
<div
style={ styles.editorWrapper }
>
<Editor
style={ styles.editor }
placeholder="Write something!"
/>
</div>

</div>
)
}
}

const styles = {
editorWrapper: {
backgroundColor: "#ececec",
border: "2px solid #888888",
padding: "25px"
},
editor: {
backgroundColor: "#000"
}
}

Come descritto nei documenti di React, posso modellare il mio Component (e div, ecc.) Usando gli stili in linea, come il h1 o l'editorWrapper div.

Ora proviamo a modellare l'editor (node_modulesComponent) allo stesso modo non fa nulla.So che con i miei componenti potrei passare lo stile come oggetti di scena e poi usarlo nel componente figlio, ma non voglio davvero passare tutto il codice Draft.js e cambiare i loro componenti.

Esiste una soluzione pulita per lo stile di componenti di terze parti? O devo usare buoni vecchi css. Se è così, non è male avere un po 'di styling in Componenti e altri stili in CSS esterno?

risposte:

draft-js ne ha alcuni ganci puoi usare lo stile per le parti del componente Editor, ma in genere non esiste un modo per creare componenti di terze parti. Molti componenti di terze parti accetteranno oggetti di scena passati a scavalcare stili, materiale ui fa abbastanza bene. Se un componente di terze parti non fornisce un'opzione per passare stili personalizzati, è possibile racchiudere il componente in un className e scrivere css per sovrascrivere gli stili predefiniti. Ciò potrebbe non funzionare se il componente di terze parti utilizza stili in linea, in cui caso che devi usare !important tutto il tuo css o forchetta il componente interamente. Spero che sia d'aiuto!