大螃嗨

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

问题：ThemeProvider不生效的问题？ 解决方案：版本问题，需要使用MuiThemeProvider来注入主题，参考如下代码，或点击链接

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;

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

CSS媒体查询

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],
    },
  },
});