재질 ui isomorphic 반응 응용 프로그램에서 페이지의 스타일을 지정하지 않았습니다.

Question

재질이 동질 환경에서 ui를 설정하는 데 모든 지침을 따라 왔지만 텍스트에 디자인이 표시되지 않은 채로 내 페이지는 여전히 흰색입니다. universal-react-redux-starter-kit을 사용하고 있습니다. 파이어 폭스, I GE는이 콘솔에

알 수없는 특성 'MUI 준비된'에서

. 선언이 내려졌습니다. localhost : 3000 알 수없는 속성 'mui-prepared'. 선언이 내려졌습니다. localhost : 3000 알 수없는 속성 'mui-prepared'. 선언이 내려졌습니다. 요청 방식 '크롬 확장'80235ae9f69d4d5feb32.serviceworker.js에 지원되지 않는 : sourcemap : 618

에서 그리고 내 페이지 외모 크롬에서

나는 (약속을)이

catch되지 않은 형식 오류를 얻을 지금 일 동안이

처럼, 나는이 문제를 알아낼 수 없었다.

//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 도울 수 있습니다.