material-ui - 如何从材质表中的自定义操作按钮中删除背景波纹效果？

Question

我想从我在工具栏中创建的自定义按钮中删除背景波纹效果，以代替默认图标按钮。请参阅下面的屏幕截图，我只想从导入和添加按钮中删除波纹效果（圆圈一），所有其他操作图标按钮应正常运行。

                    <MaterialTable
                        columns={columns}
                        data={this.state.data}
                        icons={{
                            Add:()=><AddTaskButton onClick={()=>{}}/>
                        }}
                        actions={[
                            {
                                icon:this.renderImportButton,
                                isFreeAction:true
                            }
                        ]}
                        editable={{
                            onRowAdd: newData => this.onRowAdd(newData)
                        }}
                    />

Answer 1

您应该覆盖操作组件：

<MaterialTable
components={{
Action: props => <MyAction {...props}/>
}}
                        columns={columns}
                        data={this.state.data}
                        icons={{
                            Add:()=><AddTaskButton onClick={()=>{}}/>
                        }}
                        actions={[
                            {
                                icon:this.renderImportButton,
                                isFreeAction:true
                            }
                        ]}
                        editable={{
                            onRowAdd: newData => this.onRowAdd(newData)
                        }}
                    />

我的行动

import { Icon, IconButton, Tooltip } from '@material-ui/core';

class MyAction extends React.Component {
  render() {
    let action = this.props.action;
    if (typeof action === 'function') {
      action = action(this.props.data);
      if (!action) {
        return null;
      }
    }

    const handleOnClick = event => {
      if (action.onClick) {
        action.onClick(event, this.props.data);
        event.stopPropagation();
      }
    };

    const button = (
      <span>
        <IconButton
          color="inherit"
          disabled={action.disabled}
          disableRipple
          onClick={(event) => handleOnClick(event)}
        >
          {typeof action.icon === "string" ? (
            <Icon {...action.iconProps} fontSize="small">{action.icon}</Icon>
          ) : (
              <action.icon
                {...action.iconProps}
                disabled={action.disabled}                
              />
            )
          }
        </IconButton>
      </span>
    );

    if (action.tooltip) {
      return <Tooltip title={action.tooltip}>{button}</Tooltip>;
    } else {
      return button;
    }
  }
}