ReactJS: Как удалить ярлык строки на <TableRow> Материал-UI's <Table>?

Question

У меня есть <Table/> и <TableRow> внутри, а после щелчка по строке строка остается выделенной. Я попробовал <TableRow disableTouchRipple={true}>, но не повезло. Как удалить эту подсветку, даже если она нажата?

Вот код:

<Table> 
     <TableBody displayRowCheckbox={false}> 
     <TableRow> 
      <TableRowColumn>Row 1</TableRowColumn> 
      <TableRowColumn>Content 1</TableRowColumn> 
     </TableRow> 
     <TableRow> 
      <TableRowColumn>Row 2</TableRowColumn> 
      <TableRowColumn>Content 2</TableRowColumn> 
     </TableRow> 
     </TableBody> 
    </Table> 

Answer 1

Вы можете установить «Classname» на столе (или его строки), а затем установить цвет фона ячеек таблиц, прозрачным ...

.table-no-highlight td { 
    background-color: transparent !important; 
} 

<div id="container"></div> 

const { Table, TableHeader, TableBody, TableRow, RaisedButton, TableRowColumn, TableHeaderColumn, MuiThemeProvider, getMuiTheme } = MaterialUI; 

class Example extends React.Component { 
    render() { 
    return (
     <Table className="table-no-highlight"> 
     <TableHeader> 
      <TableRow> 
      <TableHeaderColumn>ID</TableHeaderColumn> 
      <TableHeaderColumn>Name</TableHeaderColumn> 
      <TableHeaderColumn>Status</TableHeaderColumn> 
      </TableRow> 
     </TableHeader> 
     <TableBody> 
      <TableRow> 
      <TableRowColumn>1</TableRowColumn> 
      <TableRowColumn>John Smith</TableRowColumn> 
      <TableRowColumn>Employed</TableRowColumn> 
      </TableRow> 
      <TableRow> 
      <TableRowColumn>2</TableRowColumn> 
      <TableRowColumn>Randal White</TableRowColumn> 
      <TableRowColumn>Unemployed</TableRowColumn> 
      </TableRow> 
      <TableRow> 
      <TableRowColumn>3</TableRowColumn> 
      <TableRowColumn>Stephanie Sanders</TableRowColumn> 
      <TableRowColumn>Employed</TableRowColumn> 
      </TableRow> 
      <TableRow> 
      <TableRowColumn>4</TableRowColumn> 
      <TableRowColumn>Steve Brown</TableRowColumn> 
      <TableRowColumn>Employed</TableRowColumn> 
      </TableRow> 
     </TableBody> 
     </Table> 
    ); 
    } 

} 

const App =() => (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Example /> 
    </MuiThemeProvider> 
); 

ReactDOM.render(
    <App />, 
    document.getElementById('container') 
); 

Смотрите пример на https://jsfiddle.net/mzt8pvtu/1/

Answer 2

Используйте selectable опоры, чтобы отключить подсветку так:

<Table selectable={false}> 
    <TableBody displayRowCheckbox={false}> 
    <TableRow> 
     <TableRowColumn>Row 1</TableRowColumn> 
     <TableRowColumn>Content 1</TableRowColumn> 
    </TableRow> 
    <TableRow> 
     <TableRowColumn>Row 2</TableRowColumn> 
     <TableRowColumn>Content 2</TableRowColumn> 
    </TableRow> 
    </TableBody> 
</Table>