如何去除 material-table 中自定义操作按钮的背景波纹效果?
How to remove background ripple effect from custom action button in material-table?
我想从我在工具栏中创建的自定义按钮中删除背景波纹效果以代替默认图标按钮。
参考下面的截图,我只想从导入和添加按钮中删除波纹效果(圆圈一个),所有其他操作图标按钮应该正常运行。
<MaterialTable
columns={columns}
data={this.state.data}
icons={{
Add:()=><AddTaskButton onClick={()=>{}}/>
}}
actions={[
{
icon:this.renderImportButton,
isFreeAction:true
}
]}
editable={{
onRowAdd: newData => this.onRowAdd(newData)
}}
/>
您应该覆盖操作组件:
<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;
}
}
}
我想从我在工具栏中创建的自定义按钮中删除背景波纹效果以代替默认图标按钮。 参考下面的截图,我只想从导入和添加按钮中删除波纹效果(圆圈一个),所有其他操作图标按钮应该正常运行。
<MaterialTable
columns={columns}
data={this.state.data}
icons={{
Add:()=><AddTaskButton onClick={()=>{}}/>
}}
actions={[
{
icon:this.renderImportButton,
isFreeAction:true
}
]}
editable={{
onRowAdd: newData => this.onRowAdd(newData)
}}
/>
您应该覆盖操作组件:
<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;
}
}
}