재료 스 니크 바에 다중 배경색을 적용 할 수 없습니다.

Question

머티리얼 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

Answer 1

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

재료 UI를 V0. 특히 backgroundColor은 linear-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 속성으로 설정해야합니다. 그래디언트는 색상이 아닌 이미지이기 때문입니다.