Inline-Styling von React.js - So stylen Sie Komponenten aus node_modules

Question

Ich verwende zur Zeit Draft.js in meiner React-App. Es wird über node_modules geladen und dann in einer Komponente verwendet werden, zB:

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' 
    } 
} 

Wie in dem React docs beschrieben, kann ich meine eigene Komponente (und div-Tags usw.) Stil mit Inline-Stile, wie die h1 oder der EditorWrapper div.

Jetzt versucht, den Editor (node_modules Component) auf die gleiche Weise zu stylen macht nichts. Ich weiß, dass ich mit meinen eigenen Komponenten den Stil als Requisiten übergeben und dann in der untergeordneten Komponente verwenden kann, aber ich möchte wirklich nicht den gesamten Code Draft.js durchlaufen und ihre Komponenten ändern.

Gibt es eine saubere Lösung, um Komponenten von Drittanbietern zu gestalten? Oder muss ich gute alte CSS verwenden. Wenn ja, ist es nicht schlecht, etwas Styling in den Komponenten und anderen Stilen in externem CSS zu haben?

Answer 1

draft-js hat einige hooks, die Sie verwenden können, um Teile der Editor-Komponente zu stylen, aber im Allgemeinen gibt es keine Möglichkeit, Komponenten von Drittanbietern zu stylen. Viele Komponenten von Drittanbietern akzeptieren Requisiten, die zum Überschreiben von Stilen übergeben werden, material-ui tut dies ziemlich gut. Wenn eine Komponente von Drittanbietern keine Option zum Übergeben benutzerdefinierter Stile bietet, können Sie die Komponente in einen Klassennamen umbrechen und CSS schreiben, um die Standardstile zu überschreiben. Dies funktioniert möglicherweise nicht, wenn die Drittanbieterkomponente Inline-Stile verwendet. In diesem Fall müssen Sie entweder !important auf Ihrer gesamten CSS-Ebene verwenden oder die Komponente vollständig verzweigen. Ich hoffe, das hilft!