Wie legen Sie die Ripple-Farbe eines Material-ui ListItem fest?

Question

Ich kann scheinen, irgendwo in der Dokumentation zu finden, wie man die Kräuselungsfarbe auf einem Material-ui ListItem setzt. Ich habe die ListItem in einem MuiThemeProvider mit meinem überschriebenen Thema wie folgt gewickelt:

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

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

Welche Palettenfarbe Eigenschaft sollte ich die Welligkeit Farbe ändern?

Answer 1

Sie sind auf dem richtigen Weg! Um die Welligkeit Farbe zu ändern, sollte Ihr Thema sein:

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

... aber das ändert sich die Welligkeit Farbe für die meisten der material-ui Komponenten, nicht nur ListItem. Sie können die Welligkeit Farbe direkt auf der ListItem ändern mit den focusRippleColor und touchRippleColor Eigenschaften:

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

Answer 2

ich hier habe auf einem ähnlichen Problem arbeiten auf den Button, aber es scheint ganz allmählich ausbreitende Wirkung, so vielleicht dies wird konsequent zu sein helfen Sie jemandem in der Zukunft.

In Material-UI next/v1 ist die rippleColor explizit mit der Label-Farbe des Elements verknüpft. Wenn die Welligkeit und das Etikett unterschiedliche Farben haben sollen, müssen Sie die Beschriftungsfarbe separat überschreiben.

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); 

Dies sollte Ihnen eine überschriebene Ripple-Farbe bekommen.