플로팅 액티브 버튼 리플 색

Question

FloatingActionButton을 사용하고 있지만 의도 한대로 사용하지 않았습니다. 따라서 배경색을 흰색으로 변경하고 IconColor를 변경했습니다. Material UI 자체가 아닌 react-icons을 사용하여 아이콘을 얻습니다.

const iconStyle = { 
    height: 64, 
    width: 64, 
    fill: 'green', 
    color: 'green' 
}; 

... 

render(){ 
    return (
        <FloatingActionButton 
        backgroundColor= 'white' 
        style={ buttonStyle } 
        iconStyle={ iconStyle } 
        zDepth={ 1 }> 
         {this.props.children} 
        </FloatingActionButton> 
     ); 

구성 요소 특정 수준에서 리플 색을 변경하는 방법은 무엇입니까?

Answer 1

사용자 정의 테마를 정의해야합니다. 또한

const muiTheme = getMuiTheme({ 
    floatingActionButton : { 
    iconColor : '#666'  // desired ripple color 
    } 
}); 

render() { 
    return (
    <MuiThemeProvider muiTheme={muiTheme}> 
     <FloatingActionButton 
     backgroundColor= 'white' 
     style={ buttonStyle } 
     iconStyle={ iconStyle } 
     zDepth={ 1 } 
     > 
      {this.props.children} 
     </FloatingActionButton> 
    </MuiThemeProvider> 
); 
} 

는

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

더 많은 정보는 여기에서 찾을 수 있습니다 getMuiTheme 및 MuiThemeProvider를 가져올 것을 잊지 마세요. http://www.material-ui.com/#/customization/themes