2017-10-04 9 views
0

다음 사용자 인터페이스 Material UI 테마를 사용하는 React 구성 요소가 있습니다.Redux 저장소를 통해 Material UI 테마를 동적으로 업데이트하려면 어떻게해야합니까?

const getTheme = name => themes.filter (theme => theme.name === name) [0] || 테마 [0]; 나는 (돌아 오는 기록을 통해 확인) 상태가 업데이트되는 설정 페이지에서 테마 이름을 업데이트 할 때

const Root = props => (
    <MuiThemeProvider muiTheme={getMuiTheme(getTheme(props.theme).data)}> 
     <Router history={history}> 
      <Switch> 
       <Route component={AppContainer}/> 
      </Switch> 
     </Router> 
    </MuiThemeProvider> 
); 

는 그것은 용기

const mapStateToProps = state => ({ 
    theme: state.settings.theme 
}); 

const RootContainer = connect(mapStateToProps, {})(Root); 

에 의해 공급,하지만 테마가 업데이트되지 않습니다. 그러나 페이지에서 벗어나면 새 테마가 적용됩니다.

는 아마도 상태의 변화는 Root 구성 요소가 다시 렌더링하는 원인이되지 않았거나 내가 테마를 얻을 수있는 방법

<MuiThemeProvider muiTheme={getMuiTheme(getTheme(props.theme).data)}> 

어떤 생각을 적용한이 방법으로 이해하지 못하는 뭔가가있다 국가에서 변경된 인스턴스를 업데이트 하시겠습니까?

답변

0

밝혀졌습니다. 업데이트 된 테마를 내 App 구성 요소 (계층 구조의 루트 바로 아래)의 소품으로 전달해야했습니다. 테마가 컨텍스트를 통해 전달되고 테마를 구성하는 구성 요소의 보조를 변경하는 것이 필요한 업데이트를 실행하기에 충분하지 않다는 사실과 관련이있는 것 같습니다.