Как убрать фоновый эффект ряби из кнопки пользовательских действий в таблице материалов?

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)
                        }}
                    />

MyAction

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