改变输入框边框对默认颜色  
使用theme来修改primary颜色  
https://material-ui.com/zh/components/text-fields/

问题：ThemeProvider不生效的问题？   
解决方案：版本问题，需要使用MuiThemeProvider来注入主题，参考如下代码，或[[https://material-ui.com/zh/guides/migration-v0x/#%E6%88%91%E5%BA%94%E8%AF%A5%E4%BB%8E%E5%93%AA%E9%87%8C%E5%BC%80%E5%A7%8B%E8%BF%81%E7%A7%BB%EF%BC%9F|点击链接]]    
<code javascript>
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const theme = createMuiTheme({
 /* theme for v1.x */
});
const themeV0 = getMuiTheme({
 /* theme for v0.x */
});

function App() {
 return (
   <MuiThemeProvider theme={theme}>
     <V0MuiThemeProvider muiTheme={themeV0}>
       {/*Components*/}
     </V0MuiThemeProvider>
   </MuiThemeProvider>
 );
}

export default App;
</code>

JavaScript媒体查询
<code Javascript>
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';

function MyComponent(props) {
  if (isWidthUp('sm', props.width)) {
    return <span />
  }

  return <div />;
}

export default withWidth()(MyComponent);
</code>

CSS媒体查询
<code Javascript>
const styles = theme => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('sm')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});
</code>