Material-UI ListItemの波紋の色はどのように設定しますか？

Question

マテリアル内のListItemに波紋の色を設定する方法については、ドキュメンテーションのどこでも見つけることができます。私はこのように私のオーバーライドされたテーマにMuiThemeProviderに包まれたのListItemを持っている：私は、リップルの色を変更するために設定する必要がありますどのようなパレットの色プロパティ

const muiTheme = getMuiTheme({ 
    palette: { 
    hoverColor: 'red', 
    }, 
}); 

<MuiThemeProvider muiTheme={muiTheme}> 
    <ListItem> 
    ... 
    </ListItem> 
</MuiThemeProvider> 

？

Answer 1

あなたは正しい軌道に乗っています！リップルの色を変更するには、あなたのテーマは次のようになります。

const muiTheme = getMuiTheme({ 
    ripple: { 
    color: 'red', 
    }, 
}); 

...しかし、それはmaterial-uiコンポーネントだけでなく、リストアイテムのほとんどのリップルの色が変わります。あなたはfocusRippleColorとtouchRippleColor特性を持つListItemに直接リップル色を変更することができます。

<ListItem focusRippleColor="darkRed" touchRippleColor="red" primaryText="Hello" /> 

Answer 2

私はここにボタン上の同様の問題に取り組んでしまったが、波及効果全体で一貫ように見えるので、おそらくこの意志将来誰かを助けてください。

Material-UI next/v1では、rippleColorが要素のラベルの色に明示的にリンクされています。リップルとラベルを異なる色にするには、ラベルの色を個別に上書きする必要があります。

import MUIButton from 'material-ui/Button'; 
import {withStyles} from 'material-ui/styles'; 

const Button = (props) => { 

    return <MUIButton className={props.classes.button}>Hat</MUIButton> 

const styles = { 
    button: {color: 'rebeccapurple'} 
}; 

export default withStyles(styles)(Button); 

これはオーバーライドされたリップルカラーを取得します。