反应组件CSS设置不正确

Question

I have a universal React application based off of https://github.com/kriasoft/react-starter-kit

In one of my components I am trying to implement react-select https://github.com/JedWatson/react-select

I copied and pasted the CSS from the example directory into my scss file and when I pull up the modal that is supposed to have the select, it's just a squished, tiny, input field with no styling on it at all. Not sure what I am missing here.

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'; is the stylesheet that is copied directly from the github example.

There are no css options being applied to that field when I look in the dev tools.

Answer 1

I had this same problem the first time I used it. You need to import the css file from react-select .

Example:

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

Answer 2

From what I can see you are not applying any styles to the <SelectField /> . Try adding className = { s.my-class-name } as a property to the select field.