Question

我正在使用Material UI库的Tab组件，并想禁用它具有的默认波纹效果。在提到How to disable ripple in Material Design React之后，我尝试这样做：

const CustomTab = withStyles({
    ...
    MuiButtonBase: {
        disableRipple: true
    }
    ...
})(Tab);

但是它不起作用，请帮助。预先感谢！

Answer 1

您可以选择通过添加道具disableRipple来分别禁用选项卡组件上的波纹

<Tab disableRipple label="Item One" {...a11yProps(0)} />

如果您希望全局禁用Ripple，则可以选择使用ThemeProvider和createMuiTheme覆盖默认主题

import Demo from "./demo";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createMuiTheme({
  props: {
    MuiButtonBase: {
      // The properties to apply
      disableRipple: true // No more ripple, on the whole application ?!
    }
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>,
  document.querySelector("#root")
);

Working DEMO

Answer 2

文档说：

import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({
  components: {
    // Name of the component ⚛️
    MuiButtonBase: {
      defaultProps: {
        // The props to apply
        disableRipple: true, // No more ripple, on the whole application ?!
      },
    },
  },
});

https://next.material-ui.com/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally

如何在React的Material UI库的Tab组件中禁用波纹

2 个答案: