2017-10-13 5 views
0

material-ui를 사용하는 '대시 보드'앱이 있고 내부에있는 다른 앱을 호출하고 렌더링하는 대시 보드의 내부에 있습니다. 이것은 dev에서 잘 동작하지만 일단 프로덕션을 사용하면 UI 클래스 이름 충돌을 일으키고 많은 것들을 엉망으로 만듭니다.프로덕션 CSS의 Material-ui

여기에 무엇을 제공해야할지 모르겠지만 CSS 이름의 전신을 적용 할 수있는 방법이 있습니까? 그래서 .main-c1, app2-c1, app3-c1 등과 같은 이름을 가질 수 있습니까? 현재 app2를 렌더링 할 때 모든 클래스를 다시 작성합니다.

답변

1

저는 아직까지는 매우 새로운 것이므로 가장 좋은 대답이 아니라면 용서해주십시오. 각 앱마다 다른 테마를 정의하는 것이 원하는 결과를 얻는 데 도움이 될 것입니다. 이

export default { 
spacing: spacing, 
    fontFamily: 'Roboto, sans-serif', 
    palette: { 
    primary1Color: cyan500, 
    primary2Color: cyan700, 
    primary3Color: grey400, 
    accent1Color: pinkA200, 
    accent2Color: grey100, 
    accent3Color: grey500, 
    textColor: darkBlack, 
    alternateTextColor: white, 
    canvasColor: white, 
    borderColor: grey300, 
    disabledColor: fade(darkBlack, 0.3), 
    pickerHeaderColor: cyan500, 
    clockCircleColor: fade(darkBlack, 0.07), 
    shadowColor: fullBlack, 
    }, 
}; 

같은 일을하고 당신이 테마 제공자를 호출 할 때 당신이 당신의 다른 응용 프로그램에로드 할 때 다른 MUI 테마를 제공합니다.

<MuiThemeProvider muiTheme={YOUR-THEME-HERE}> 
<AppBar title="My AppBar" /> 
</MuiThemeProvider> 

mUI Theme Doc

희망이 적어도 조금 도움이됩니다.

+0

내가 겪고있는 문제는 두 번째 응용 프로그램을 렌더링 할 때 모든 CSS를 다시 만듭니다 (따라서 C1는 이전과 완전히 다른 것으로 다시 작성됩니다).하지만 이전 구성 요소는 여전히 존재합니다. 그래서 그들의 CSS는 모두 엉망이됩니다. 나는'react-jss'를 설치하고 각 애플리케이션 전체를 포장 한 다음'classNamePrefix = "app1"'을 사용하여 대부분의 것들을 도왔습니다. 아직도 조금 엉망이 됐어. – John