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

Question

我似乎可以在文档中的任何地方找到如何在材料-ui ListItem上设置波纹颜色.我有一个包含在MuiThemeProvider中的ListItem,我的重写主题如下:

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

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

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

Answer 1

涟漪效果来自名为 TouchRipple 的子组件。具体来说，波纹颜色来自background-color可以使用类选择的元素的颜色MuiTouchRipple-child。波纹颜色是currentColor默认的，但可以轻松覆盖。

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

例子：

样式化组件 API：

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

钩子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 2

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

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;

使用 CodeSandBox 中的代码。

有用的链接：

• 这是使用默认值的主题对象的外观。

• 该overrides键使您能够自定义组件类型的所有实例的外观。

Answer 3

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

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

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

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