React component css not being set properly

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.

Could you post a screenshot of what it looks like or an example? Are you saying the modal is squished or the select field? Can you look in the browser which styles are being applied and from what? — Geraint

André Junges André Junges · Accepted Answer · 2016-04-07T13:43:20

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

React component css not being set properly

2 Answers