Search box with react@next

jsx

import React from 'react';
import Icon from '/node_modules/material-ui/Icon/Icon';
import Layout from '/node_modules/material-ui/Layout/Layout';
import Paper from '/node_modules/material-ui/Paper/Paper';
import Magnify from '/node_modules/mdi-react/MagnifyIcon.js';

import injectSheet from 'react-jss';

const styles = {
  outsideContainer: {
    width: '100%',
    height: '70%',
  },
  insideContainer: {
    marginTop: '0 !important',
    height: '100%',
  },
  inputBox: {
    flexGrow: '1 !important',
  },
  input: {
    width: '100%',
    border: 0,
    '&:focus': {
      outline: 0,
    },
  },
  iconContainer: {
    marginLeft: 8,
    paddingRight: '0 !important',
  },
};

function SearchBar({ classes }) {
  return (
    <Paper className={classes.outsideContainer}>
      <Layout container align="center" className={classes.insideContainer}>
        <Layout item className={classes.iconContainer}>
          <Icon><Magnify /></Icon>
        </Layout>
        <Layout item className={classes.inputBox}>
          <input type="text" className={classes.input} />
        </Layout>
      </Layout>
    </Paper>
  );
}

export default injectSheet(styles)(SearchBar);

Interesting. I'd like to try something based on this, but I'm curious where Layout comes from. My install of material-ui seems to be lacking that component.

@devuxer I guess Layout comes from material ui next (its the next version of material ui that is not released yet)

Got here looking for search input. In the end I took the solution from MUI docs site itself. The search input in their blue topbar is located here