个人中心
gpt4 book ai didi

javascript - ReactJS:如何删除 Material-UI 的 的 上的行突出显示？
转载 作者：太空宇宙 更新时间：2023-11-04 02:09:11 24 4
gpt4 key购买 nike

我有一个 <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>

最佳答案

您可以在表格(或其行)上设置“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/ 中的示例

关于javascript - ReactJS:如何删除 Material-UI 的 <Table> 的 <TableRow> 上的行突出显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40116531/

24 4 0
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com