示例：

Question

我似乎可以在文档中的任何地方找到如何在材料-ui ListItem上设置波纹颜色。我将ListItem包装在MuiThemeProvider中，其中包含我的重写主题：

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

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

我应该设置什么调色板颜色属性来改变波纹颜色？

Answer 1

我来到这里处理关于Button的类似问题，但它似乎在涟漪效应上保持一致，所以这可能会对未来的某些人有所帮助。

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

这应该会让你得到一个被覆盖的波纹颜色。

Answer 2

波纹效果来自称为TouchRipple的子组件。具体而言，波纹色来自元素的background-color，该元素可以使用MuiTouchRipple-child类进行选择。波纹颜色默认为currentColor，但可以轻松覆盖。

请注意，这适用于任何基于按钮的组件，而不仅限于ListItem。

示例：

Styled Components API：

const MyListItem = styled(ListItem)`
    .MuiTouchRipple-child {
        background-color: red;
    }
`;

Hook API：

const useStyles = makeStyles({
    root: {
        '.MuiTouchRipple-child': {
            backgroundColor: 'red';
        }
    }
});

const MyListItem = () {
  const classes = useStyles();
  return <ListItem button className={classes.root}>Hook</ListItem>;
}

全局CSS：

.MuiListItem-root .MuiTouchRipple-child {
    background-color: red;
}

Answer 3

这是将全局波纹颜色更改为红色的方法。

import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const theme = createMuiTheme({
  overrides: {
    // Style sheet name
    MuiTouchRipple: {
      // Name of the rule
      child: {
        // Some CSS
        backgroundColor: "red"
      }
    }
  }
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <List>
        <ListItem button>
          <ListItemText primary="Item One" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="Item Two" />
        </ListItem>
        {/* <ListItem button> ... </ListItem> */}
      </List>
    </ThemeProvider>
  );
};

export default App;

Play with the code in CodeSandBox。

有用的链接：

the theme object的默认值如下所示。
The overrides key使您可以自定义组件类型的所有实例的外观。

Answer 4

你走在正确的轨道上！要更改波纹颜色，您的主题应为：

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

...但是，这会改变大多数material-ui组件的纹波颜色，而不仅仅是ListItem。您可以使用ListItem和focusRippleColor属性直接在touchRippleColor上更改波纹颜色：

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

Answer 5

这对我有用：

.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
  background-color: mat-color($my-gray, 500);
}

Answer 6

如果要更改波纹效果的颜色，可以像尝试做的那样通过主题来完成。

在主题中，您可以更改TouchRippleProps的类，并以CSS样式定义颜色。

import React from 'react';
import { createMuiTheme, ThemeProvider, Button } from '@material-ui/core';

const theme= createMuiTheme({
    props:{
        MuiButtonBase: {
            TouchRippleProps: {
                classes: {
                    root: 'CustomizeTouchRipple'
                }
            }
        }
    }
});

export default function App() {

return (
        <ThemeProvider theme={theme}>
            <Button>Click</Button>
        </ThemeProvider>
    );
}

在CSS样式文件中：

.CustomizeTouchRipple {
  color: red;
}

就这么简单。

更新1：

您可以直接放置style: {color: red[500]}而不是CSS类样式。

如何设置材质-ui ListItem的波纹颜色？

6 个答案:

示例：

Styled Components API：

Hook API：

全局CSS：

更新1：