title: borderRadius not working when use Material UI
body: <p>I using ReactJS and Material-UI in my web application. When I define props search for search bar, it's working except borderRadius. I checked Style tab in the Developer Tools (F12), border-radius property was overwritten but search bar not change. Please help me.</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  import * as actions from './../actions/index';
  
  import AppBar from '@material-ui/core/AppBar';
  import Badge from '@material-ui/core/Badge';
  import IconButton from '@material-ui/core/IconButton';
  import Tooltip from '@material-ui/core/Tooltip';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import { withStyles } from '@material-ui/core/styles';
  import InputBase from '@material-ui/core/InputBase';
  import { fade } from '@material-ui/core/styles/colorManipulator';
  
  import MenuIcon from '@material-ui/icons/Menu';
  import MailIcon from '@material-ui/icons/Mail';
  import HomeIcon from '@material-ui/icons/Home';
  import QuestionIcon from '@material-ui/icons/QuestionAnswer';
  import CartIcon from '@material-ui/icons/ShoppingCart';
  import PersonIcon from '@material-ui/icons/Person';
  import SearchIcon from '@material-ui/icons/Search';
  
  const styles = theme =&gt; ({
      root: {
          width: '100%',
      },
      grow: {
          flexGrow: 1,
      },
      appBar: {
          zIndex: 1300,
      },
     //search props for search bar
      search: {
          position: 'relative',
          borderRadius: theme.shape.borderRadius,
          backgroundColor: fade(theme.palette.common.white, 0.15),
          '&amp;:hover': {
              backgroundColor: fade(theme.palette.common.white, 0.25),
          },
          marginRight: theme.spacing.unit * 2,
          marginLeft: 0,
          width: '100%',
          [theme.breakpoints.up('sm')]: {
              marginLeft: theme.spacing.unit * 3,
              width: 'auto',
          },
      },
      searchIcon: {
          width: theme.spacing.unit * 9,
          height: '100%',
          position: 'absolute',
          pointerEvents: 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
      },
      inputRoot: {
          color: 'inherit',
          width: '100%',
          backgroundColor: '#EAE9E8'
      },
      inputInput: {
          paddingTop: theme.spacing.unit,
          paddingRight: theme.spacing.unit,
          paddingBottom: theme.spacing.unit,
          paddingLeft: theme.spacing.unit * 10,
          transition: theme.transitions.create('width'),
          width: '100%',
          [theme.breakpoints.up('md')]: {
              width: 200,
          },
      },
  })
  
  
  class Header extends Component {
      onToggleNav = () =&gt; {
          this.props.onToggleNav()
      }
      render() {
          const { classes } = this.props;
          return (
              &lt;header className={classes.root}&gt;
                  &lt;AppBar color="inherit" className={classes.appBar}&gt;
                      &lt;Toolbar&gt;
                          &lt;IconButton color="inherit" className={"remove_outline"} onClick={this.onToggleNav}&gt;
                              &lt;MenuIcon /&gt;
                          &lt;/IconButton&gt;
                          &lt;Typography variant="h6" color="inherit" noWrap&gt;
                              Watch Shop
                          &lt;/Typography&gt;
                         {/* search bar */}
                          &lt;div className={classes.search}&gt;
                              &lt;div className={classes.searchIcon}&gt;
                                  &lt;SearchIcon /&gt;
                              &lt;/div&gt;
                              &lt;InputBase
                                  placeholder="Search…"
                                  classes={{
                                      root: classes.inputRoot,
                                      input: classes.inputInput,
                                  }}
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className={classes.grow} /&gt;
                          &lt;div&gt;
                              &lt;Tooltip title="Trang chủ"&gt;
                                  &lt;IconButton className="remove_outline"&gt;
                                      &lt;HomeIcon /&gt;
                                  &lt;/IconButton&gt;
                              &lt;/Tooltip&gt;
                              &lt;Tooltip title="Hỗ trợ"&gt;
                                  &lt;IconButton className="remove_outline"&gt;
                                      &lt;QuestionIcon /&gt;
                                  &lt;/IconButton&gt;
                              &lt;/Tooltip&gt;
                              &lt;Tooltip title="Phản hồi"&gt;
                                  &lt;IconButton className="remove_outline"&gt;
                                      &lt;MailIcon /&gt;
                                  &lt;/IconButton&gt;
                              &lt;/Tooltip&gt;
                              &lt;Tooltip title="Tài khoản"&gt;
                                  &lt;IconButton className="remove_outline"&gt;
                                      &lt;PersonIcon /&gt;
                                  &lt;/IconButton&gt;
                              &lt;/Tooltip&gt;
                              &lt;Tooltip title="Giỏ đồ"&gt;
                                  &lt;IconButton className="remove_outline"&gt;
                                      &lt;Badge badgeContent={4} color="secondary"&gt;
                                          &lt;CartIcon /&gt;
                                      &lt;/Badge&gt;
                                  &lt;/IconButton&gt;
                              &lt;/Tooltip&gt;
                          &lt;/div&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
              &lt;/header&gt;
          );
      }
  }
  
  const mapDispatchToProps = (dispatch, props) =&gt; {
      return {
          onToggleNav: () =&gt; {
              dispatch(actions.isShowNav())
          }
      }
  }
  
  export default connect(null, mapDispatchToProps)(withStyles(styles)(Header));</code></pre>
  </div>
  </div>
  </p>
  
  <p>Style tab in the Developer Tools</p>
  
  <p><a href="https://i.stack.imgur.com/JoB2L.png" rel="nofollow noreferrer">Style tab in the Developer Tools</a></p>
  
  <p>Search bar:
  <a href="https://i.stack.imgur.com/C8TWz.png" rel="nofollow noreferrer">Search bar</a></p>