2017-12-31 91 views
2

머티리얼 UI 스낵바에 다중 배경색을 적용하는 방법은 무엇입니까? 아래에서 언급 한 바와 같이 선형 그래디언트로 시도했지만 작동하지 않습니다.재료 스 니크 바에 다중 배경색을 적용 할 수 없습니다.

import Snackbar from 'material-ui/Snackbar'; 

const bodyStyle = { 
    border: `2px solid ${config.actualWhite}`, 
    minWidth: '50%', 
    maxWidth: '100%', 
    height:'55px', 
    backgroundColor: 'linear-gradient(to right bottom, #00897B, #FFE082)', 
    fontFamily: config.fontFamily, 
    fontStyle: config.fontStyle, 
    fontWeight: config.fontWeight, 
    fontSize: config.fontSize 
} 

<Snackbar 
    open={this.state.openLogout} 
    message="You are Successfuly loggedout! Thanks for being part of web Family!" 
    autoHideDuration={4000} 
    bodyStyle={bodyStyle} 
    action="Close" 
    onRequestClose={this.handleRequestClose} 
    onActionTouchTap={this.handleRequestClose} 
    style={myTheme.snackbarfromTop} 
/> 

Snackbar screenshot

+0

배경색을 선형 그라데이션 색상으로 배경으로 변경하면 효과적입니다. 참조 용 스낵바 이미지 첨부. –

답변

1

당신은 당신의 CSS에 약간의 오류가있어

재료 UI를 V0. 특히 backgroundColorlinear-gradient 함수가 색상이 아닌 이미지를 반환하기 때문에 background이어야합니다. 그래서, 당신은해야한다 : 당신이 stable version sometime in early 2018로 승격해야 V1 베타로 전환을 고려해야한다

const bodyStyle = { 
    border: `2px solid ${config.actualWhite}`, 
    minWidth: '50%', 
    maxWidth: '100%', 
    height:'55px', 
    // Note the change to background here 
    background: 'linear-gradient(to right bottom, #00897B, #FFE082)', 
    fontFamily: config.fontFamily, 
    fontStyle: config.fontStyle, 
    fontWeight: config.fontWeight, 
    fontSize: config.fontSize 
} 

참고. 아래에 적절한 해결책을 설명합니다.

재료 UI v1을

변경은 A Snackbar 작품의 backgroundColor하지만 아이들, SnackbarContent, 그리고 그 아이가 배경 hardcoded in the source의이 전체 Snackbar가 하나 가득하기 때문에 눈에 보이는 효과가 없습니다.

const backgroundColor = theme.palette.shades[reverseType].background.default; 

그럼, 무슨 일이 일어나고하면 원하는 그라데이션 배경이 아이에 의해 은폐되고 있다는 것입니다 : 기본적으로, 그 backgroundColor로가 설정됩니다. 그래서,

SnackbarContentProps가 아이에게 아래로 확산되는
const styles = theme => ({ 
    myCustomBackground: { 
    background: 'linear-gradient(to right bottom, #00897B, #FFE082)', 
    }, 
}); 

<Snackbar 
    SnackbarContentProps={{ 
    className: classes.myCustomBackground, 
    }} 
/> 

(12 월 2017로 line 252 of the source에 표시) :

는이 문제를 해결하려면, 당신은 SnackbarContentProps이 아이의 backgroundColor을 무시 in the Snackbar API을 설명 사용할 필요가 당신이 그 물건에 넣은 모든 것은 SnackbarContent 아이의 소품이 될 것입니다. 여기에서 자식의 className 속성을 myCustomBackground으로 설정하면 기본값 대신 원하는 그라디언트가 표시됩니다. 여기

다른 점 몇 가지주의 할 수 있습니다 가능한 응축으로 나는 예를 유지하기 위해 다른 모든 소품과 스타일을 중단 한

  • .
  • 그래디언트는 backgroundColor 속성 대신 background CSS 속성으로 설정해야합니다. 그래디언트는 색상이 아닌 이미지이기 때문입니다.
+0

시간 내 주셔서 감사합니다. 위에서 언급 한 것과 같은 방법으로 적용했지만 나에게는 효과가 없습니다. 저는 material-ui 버전 0.18.7을 사용하고 있습니다. 하지만 당신의 대답은 저를 다른 방향으로 도왔습니다. 내 bodyStyle에서 선형 그라디언트 색상으로 backgroundColor를 배경으로 변경했습니다. 이제 완벽하게 작동합니다. 감사합니다. –

+0

오, 알았어. 나는 당신이 material-ui @ next를 사용하지 않는다는 것을 깨닫지 못했다. 내 대답을 업데이트 해주세요. –

+0

또한, 현재 버전과 비교하여 많은 개선 사항 (및 변경 사항)이있는 다음 버전 (v1-beta)으로 업그레이드하는 것이 좋습니다. –