Material ui 没有在我的同构反应应用程序中设置页面样式

Question

我已按照所有指南在同构环境中设置 Material ui，但我的页面仍然是白色的，文本上没有显示设计。 我正在使用universal-react-redux-starter-kit。

在 Firefox 中，我在控制台中获取这个

未知属性“mui-prepared”。声明被放弃。本地主机：3000 未知属性“mui-prepared”。声明被放弃。本地主机：3000 未知属性“mui-prepared”。声明已删除。

在 Chrome 中我得到了这个

Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported 在 80235ae9f69d4d5feb32.serviceworker.js:sourcemap:618 在

我的页面是这样的

几天来，我一直无法弄清楚问题所在。

//AppContainer.js
...
render () {
const { layout, history, routes, routerKey, store, userAgent } = this.props


const muiTheme = getMuiTheme({
    palette: {
      primary1Color: green500,
      primary2Color: green700,
      primary3Color: green100,
    },
  }, {
    avatar: {
      borderColor: null,
    },
    userAgent: userAgent,
  });
return (
  <MuiThemeProvider muiTheme={muiTheme}>
    <Provider store={store}>
      <div style={{ height: '100%' }}>
        <Helmet {...Object.assign(clone(defaultLayout), layout)} />
        <Router history={history} children={routes} key={routerKey} />
      </div>
    </Provider>
</MuiThemeProvider>
)
}
 ...

client.js 示例

import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

// ========================================================
// Browser History Setup
// ========================================================
const browserHistory = useRouterHistory(createBrowserHistory)({
basename: __BASENAME__
 })

// ========================================================
// Store and History Instantiation
// ========================================================
// Create redux store and sync with react-router-redux. We have installed 
the

// react-router-redux reducer under the routerKey "router" in 
src/routes/index.js,

// so we need to provide a custom `selectLocationState` to inform
// react-router-redux of its location.


const initialState = window.___INITIAL_STATE__
const store = createStore(initialState, browserHistory)
const history = syncHistoryWithStore(browserHistory, store, {
selectLocationState: (state) => state.router
})

// ========================================================
// Developer Tools Setup
// ========================================================
if (0 && __DEBUG__) {
if (window.devToolsExtension) {
  window.devToolsExtension.open()
 }
}

// ========================================================
// Render Setup
// ========================================================
const MOUNT_NODE = document.getElementById('root')

let render = (routerKey = null) => {
  const routes = require('./routes/index').default(store)

  match({ history, routes }, (error, redirectLocation, renderProps) => {
    // todo: Error handling should be improved
    if (error) {
      console.log(error)
      return
    }

    Resolver.render(
      () => <AppContainer
        {...renderProps}
        store={store}
        history={history}
        routes={routes}
        routerKey={routerKey}
        userAgent={global.navigator.userAgent}
        layout={{...layout, ...(window.___LAYOUT__ || {})}}
      />,
      MOUNT_NODE
    )

  }) 
}

Answer 1

通过查看图片中的端口号，我会尝试猜测您正在使用 create-react-app 作为样板。您可能没有正确使用 MaterialUI。

This answer 可以提供帮助。