React grid layout

Question

I am trying to implement react-flexr for a grid layout in my component. Everything is importing however, the components I'm putting in the grid are still showing up below each other. Not sure what I'm doing wrong 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 {WithContext as ReactTags} from 'react-tag-input';
import {Grid, Cell} from 'react-flexr';
import 'react-flexr/styles.css';

class AddQuestionModal extends Component {

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

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

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

    deleteTag = (i) => {
        this.props.deleteTag(i);
    }

    addTag = (tag) => {
        this.props.addTag(tag);
    }

    dragTag = (tag, currPos, newPos) => {
        this.props.dragTag(tag, currPos, newPos);
    }

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

    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} />
                <Grid>
                    <Cell>
                        <Checkbox />
                    </Cell>
                    <Cell>
                        <TextInput
                            hintText="Answer"
                            multiLine = {true} />
                    </Cell>
                </Grid>
            <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>
                <ReactTags
                    tags={this.props.question.tags}
                    placeholder={this.props.tagPlaceholder}
                    handleDelete={this.deleteTag}
                    handleAddition={this.addTag}
                    handleDrag={this.dragTag}
                />
            <div className="buttonDiv">
                <Button label="Cancel" onSubmit={this.closeModal} disabled={false}/>
                <Button label="Create Question" onSubmit={this.createQuestion} disabled={false}/>
                </div>
            </Modal>
        );
    }
}

export default withStyles(AddQuestionModal,s);

Answer 1

I Think the problem is material-ui. Material-ui uses inline styles which have preference over css and so on. I had a similar problem and I could solve it using react-bootstrap.