Reagieren Komponente CSS nicht richtig

Question

ich eine universelle Anwendung aus der In einem meiner Komponenten https://github.com/kriasoft/react-starter-kit

basierend reagieren müssen gesetzt wird Ich versuche https://github.com/JedWatson/react-select

ich die CSS aus der kopiert und eingefügt reagieren Auswahl zu implementieren Beispiel Verzeichnis in meine scss-Datei und wenn ich das Modal, das die Auswahl haben soll, ziehen, es ist nur ein gequetscht, winzige, Eingabefeld ohne Styling überhaupt. Nicht sicher, was ich hier vermisse.

import React, { Component, PropTypes } from 'react'; 
import Modal from 'react-modal'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Modal.scss'; 
import SelectField from 'material-ui/lib/select-field'; 
import MenuItem from 'material-ui/lib/menus/menu-item'; 
import Checkbox from 'material-ui/lib/checkbox'; 
import ActionFavorite from 'material-ui/lib/svg-icons/action/favorite'; 
import ActionFavoriteBorder from 'material-ui/lib/svg-icons/action/favorite-border'; 
import TextInput from '../UI/TextInput'; 
import Button from '../UI/Button'; 
import Select from 'react-select'; 

class AddQuestionModal extends Component {  

    createQuestion =() => { 
     this.props.createQuestion(); 
    } 

    closeModal =() => { 
     this.props.close(); 
    } 

    changeText = (val) => { 
     this.props.changeText(val); 
    } 

    changeAnswer = (val) => { 
     this.props.changeAnswer(val); 
    } 

    techSelectChange = (event, index, value) => { 
     this.props.techSelectChange(value); 
    } 

    updateTags = (val) => { 
     this.props.updateTags(val); 
    } 


    levelSelectChange = (event, index, value) => { 
     this.props.levelSelectChange(value); 
    } 

    render() { 
     let multiLine = true; 
     return (
      <Modal 
       isOpen={this.props.open} 
       onRequestClose={this.closeModal}> 

       <h2>New Question</h2> 
       <TextInput 
        hintText="Question" 
        change={this.changeText} 
        multiLine = {true} 
        default = {this.props.question.text} 
       /> 
       <TextInput 
        hintText="Answer" 
        change={this.changeAnswer} 
        multiLine = {true} 
        default = {this.props.question.answer} 
       /> 
       <div> 
        <SelectField 
         value={this.props.question.tech} 
         onChange={this.techSelectChange} 
         floatingLabelText="Technology"> 
         <MenuItem value={"JavaScript"} primaryText="JavaScript"/> 
         <MenuItem value={"Java"} primaryText="Java"/> 
         <MenuItem value={"C#"} primaryText="C#"/> 
         <MenuItem value={".NET"} primaryText=".NET"/> 
         <MenuItem value={"iOS"} primaryText="iOS"/> 
        </SelectField> 
       </div> 
       <div> 
        <SelectField 
         value={this.props.question.level} 
         onChange={this.levelSelectChange} 
         floatingLabelText="Difficulty"> 
         <MenuItem value={"Beginner"} primaryText="Beginner"/> 
         <MenuItem value={"Intermediate"} primaryText="Intermediate"/> 
         <MenuItem value={"Advanced"} primaryText="Advanced"/> 
         <MenuItem value={"Expert"} primaryText="Expert"/> 
        </SelectField> 
       </div> 
       <div> 
        <Select 
         name="tags" 
         options={this.props.question.tags} 
         onChange={this.updateTags} 
         multi={true} 
         allowCreate={true} 
        /> 
       </div> 

       <div className='buttonDiv'> 
        <Button label='Cancel' 
         disabled={false} 
         onSubmit={this.closeModal} 
        /> 
        <Button label='Create Question' 
         disabled={false} 
         onSubmit={this.createQuestion} 
        /> 
       </div> 
      </Modal> 
     ); 
    } 
} 

AddQuestionModal.propTypes = { 
    open : PropTypes.bool.isRequired, 
    close : PropTypes.func.isRequired, 
    question : PropTypes.object.isRequired, 
    createQuestion : PropTypes.func.isRequired, 
    changeText : PropTypes.func.isRequired, 
    changeAnswer : PropTypes.func.isRequired, 
    techSelectChange : PropTypes.func.isRequired, 
    levelSelectChange : PropTypes.func.isRequired, 
    updateTags : PropTypes.func.isRequired 
}; 

export default withStyles(AddQuestionModal, s); 

'./Modal.scss'; ist das Stylesheet, das direkt aus dem GitHub-Beispiel kopiert wird.

Es gibt keine CSS-Optionen, die auf dieses Feld angewendet werden, wenn ich in den Entwicklungstools nachschaue.

Answer 1

Ich hatte das gleiche Problem das erste Mal habe ich es. Sie müssen die CSS-Datei von react-select importieren.

Beispiel:

require('../../node_modules/react-select/dist/react-select.min.css') 

Answer 2

Von dem, was ich sehe, können Sie sich bewerben keine Stile auf die <SelectField />. Versuchen Sie, dem Auswahlfeld className = { s.my-class-name } als Eigenschaft hinzuzufügen.