Javascript 使用材质表库时,如何更改并删除过滤器图标?
我想删除过滤器图标,只有空白的输入框。我尝试过使用列道具,但由于它是内嵌样式,因此无法访问该图标Javascript 使用材质表库时,如何更改并删除过滤器图标?,javascript,reactjs,material-ui,material-table,Javascript,Reactjs,Material Ui,Material Table,我想删除过滤器图标,只有空白的输入框。我尝试过使用列道具,但由于它是内嵌样式,因此无法访问该图标 import React, { Children } from "react"; import ReactDOM from "react-dom"; import MaterialTable from 'material-table'; class Example extends React.Component { render() { return ( <Mat
import React, { Children } from "react";
import ReactDOM from "react-dom";
import MaterialTable from 'material-table';
class Example extends React.Component {
render() {
return (
<MaterialTable
title="Non Filtering Field Preview"
columns={[
{ title: 'Name', field: 'name', filterCellStyle: {
background: "red"
}},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
options={{
filtering: true
}}
/>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
显然,您可以使用图标道具删除任何图标,并将空div元素传递给图标:
import React, { Children } from "react";
import ReactDOM from "react-dom";
import MaterialTable from 'material-table';
class Example extends React.Component {
render() {
return (
<MaterialTable
icons={{ Filter: () => <div /> }} // <== this solves it
title="Non Filtering Field Preview"
columns={[
{ title: 'Name', field: 'name', filterCellStyle: {
background: "red"
}},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
options={{
filtering: true
}}
/>
)
}
}