React组件css未正确设置

时间:2016-04-06 19:32:29

标签: javascript css reactjs react-select

我有一个基于https://github.com/kriasoft/react-starter-kit

的通用React应用程序

在我的一个组件中,我正在尝试实施react-select https://github.com/JedWatson/react-select

我将示例目录中的CSS复制并粘贴到我的scss文件中,当我拉出应该选择的模态时,它只是一个压扁的,微小的输入字段,没有样式一点都不不知道我在这里缺少什么。

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);

&#39; ./ Modal.scss&#39 ;;是直接从github示例复制的样式表。

当我查看开发工具时,没有css选项应用于该字段。

screenshot of modal

2 个答案:

答案 0 :(得分:0)

我第一次使用它时遇到了同样的问题。 您需要从react-select导入css文件。

示例:

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

答案 1 :(得分:0)

从我所看到的,你没有将任何样式应用于<SelectField />。尝试将className = { s.my-class-name }作为属性添加到选择字段。