Javascript 如何使用物料界面和React路由器为React应用程序提供服务
我开发了一个应用程序,主要组件是React+材质UI+React路由器。这是我的完整Javascript 如何使用物料界面和React路由器为React应用程序提供服务,javascript,reactjs,react-router,material-ui,Javascript,Reactjs,React Router,Material Ui,我开发了一个应用程序,主要组件是React+材质UI+React路由器。这是我的完整包。json: { "name": "trader-ui", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^3.2.0", "@material-ui/icons": "^3.0.1", "@stomp/stompjs": "^5.0.0", "axios"
包。json
:
{
"name": "trader-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.2.0",
"@material-ui/icons": "^3.0.1",
"@stomp/stompjs": "^5.0.0",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"prop-types": "^15.6.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:8080"
}
这是:
但是,当我尝试为生产构建服务时:
$ npm run build
$ npm install -g serve
$ serve -s build
看起来:
有人能告诉我生产构建出了什么问题吗?感谢@giorgim的建议。这是正确的。使用材质UI常见问题解答解决此问题: 我的样式设置代码位于
withRoot.js
:
import React from 'react';
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
});
function withRoot(Component) {
function WithRoot(props) {
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Component {...props} />
</MuiThemeProvider>
);
}
return WithRoot;
}
export default withRoot;
当然,您应该事先安装react jss
:
$ npm install react-jss
如果查看开发人员工具的“网络”选项卡,是否会看到任何错误?请检查是否有帮助:@Tholle,无错误
import React from 'react';
import { create } from 'jss';
import JssProvider from 'react-jss/lib/JssProvider';
import {
MuiThemeProvider,
createMuiTheme,
createGenerateClassName,
jssPreset,
} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
});
const jss = create(jssPreset());
const generateClassName = createGenerateClassName();
function withRoot(Component) {
function WithRoot(props) {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Component {...props} />
</MuiThemeProvider>
</JssProvider>
);
}
return WithRoot;
}
export default withRoot;
$ npm install react-jss