2017-10-04 6 views
0

저는 https://marmelab.com/admin-on-rest/Theming.html#using-a-custom-layout의 예제를 사용하고 있습니다.AppBar iconElement 오른쪽 시프트 관리

아래의 스 니펫 에서처럼 새로운 IconMenu가 추가되었습니다. 오른쪽 메뉴 아이콘이 표시되지 않습니다. 다른 폼에서 호출하여 테스트 된 구성 요소가 작동합니다. 그러나 AppBar로 통합하면 작동하지 않습니다.

스타일이나 다른 부분이 간섭하는 것처럼 보입니다.

누구나 AppLayout 사용자 정의와 잘 작동하는 메뉴가 있습니까?

const styles = { 
 
    // Snipped rest of the styles from example 
 
    loader: { 
 
     position: 'absolute', 
 
     top: 0, 
 
     right: 50, 
 
     margin: 16, 
 
     zIndex: 1200, 
 
    }, 
 

 
    iconMenu: { 
 
     position: 'absolute', 
 
     top: 0, 
 
     right: 0, 
 
     margin: 16, 
 
     zIndex: 1200, 
 
    }, 
 
}; 
 

 
const AppBarMenu = (props) => (
 
    <IconMenu {...props} 
 
     iconButtonElement={ 
 
      <IconButton><MoreVertIcon /></IconButton> 
 
     } 
 
     targetOrigin={{horizontal: 'right', vertical: 'top'}} 
 
     anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
 
    > 
 
     <MenuItem primaryText="Settings" /> 
 
     <MenuItem primaryText="About" /> 
 
     <MenuItem primaryText="Sign out" /> 
 
    </IconMenu> 
 
); 
 

 
AppBarMenu.muiName = 'IconMenu'; 
 

 
<AppBar title={title} iconElementRight={<AppBarMenu style={styles.iconMenu} />} />

답변

1
URL 위에서 https://github.com/marmelab/admin-on-rest/issues/525

견적에

사용 제안 : 사람이 제목 표시 줄에 버튼을 원한다면 , 그들은 사용자 정의 레이아웃뿐만 아니라이 있어야하지만, AppBar를 복사합니다 .js를 admin-on-rest에서 프로젝트로 가져 와서 가져옵니다. AppBar.js 안의 iconElementRight는 MuiAppBar 태그 안에서 작동하지만 Layout.js에서는 작동하지 않습니다.