2016-04-07 12 views
0

Ich benutze die dialogClassName Requisite, um die Breite eines Modals auf 90% zu ändern. Das CSS ändert nichts. Ich habe überprüft, dass style.css für alle anderen Klassen funktioniert.react-bootstrap: Modals dialogClassName Requisite funktioniert nicht

Die Lösung in diesem SO question funktioniert nicht. Die documentation funktioniert auch nicht.

Ich schätze Ihre Hilfe!

Verfahren nach modal.js Render:

render() { 
    return (
     <div> 
     <CardMain openModal={this.handleOpen} 
        {...this.props} /> 

     <Modal 
      show={this.state.open} 
      onHide={this.handleClose} 
      dialogClassName="main-modal" 
     > 

      <ModalMain tabKey={this.state.tabKey} 
         {...this.props} /> 

      <FeedbackForm /> 
     </Modal> 
     </div> 
    ); 
    } 

style.css:

.main-modal { 
    width: 90%; 
} 
+1

Haben Sie das Element überprüft und überprüft, warum es nicht angewendet wird? Möglicherweise haben Sie andere CSS-Regeln, die mehr Priorität als diese haben. –

+0

Danke für den Vorschlag. Es stellt sich heraus, dass die Klasse für dieses Tag "Hauptmodal-Modaldialog" ist. Also muss der "modale Dialog" Vorrang haben. Das ist die eingebaute modale Klasse react-bootstrap. Irgendeine Idee, wie man es überschreibt? – Nico

+0

können Sie Inline-CSS-Stile schreiben .. Es wird mehr Priorität als die Bootstrap-Regeln haben. Sonst können Sie die Regel in Ihrer Site.CSS angeben, indem Sie eine ID Ihres Modal .. CSS-Regeln mit ID-Selektoren haben mehr Priorität. Oder Sie können eine benutzerdefinierte Klasse hinzufügen und Ihre CSS-Regel mit allen möglichen Klassenselektoren schreiben. Wenn die Anzahl der in Selektoren verwendeten Klassen hoch ist, bekommt sie eine höhere Priorität ... Verwende die, die am besten zu dir passt –

Antwort

0

Nach Quellcode dialogClassName verwendet wird classname für das Dialogkomponente einzurichten. Sie können die Eigenschaft dialogComponent an die Modal-Komponente übergeben.

Sie Beschreibung von dialogComponent in der nächsten Zeile lesen in der Modal docs dialogComponentClass.

+0

Diese Lösung erfordert, dass ich jede css-Stütze des Modals von Grund auf neu definiere. Laut dem Beispiel von dialogClassName der Dokumentation sollte es mir möglich sein, Spezifizierungen wie Breite einfach neu zu definieren. – Nico

+0

Wie Sie in Modal render sehen können (https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L168), wird diese Eigenschaft nur an den Dialog übergeben, der von der Eigenschaft dialogComponent kommt (https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L154). – gyzerok

+0

Ich sehe deinen Standpunkt. Wenn ich jedoch implementiere, erhalte ich ein Modal, das keines der CSS enthält, das in react-bootstrap Modal enthalten ist. Also müsste ich alles neu definieren, was nicht wünschenswert ist. Die Verwendung von dialogComponent ist kein guter Ersatz für dialogClassName. – Nico

Verwandte Themen