web-dev-qa-db-ja.com

マテリアルUIカスタムホバースタイル

私はReactの初心者ですが、Material UIでクラスをオーバーライドする方法について少し混乱しています。例を見て、それを模倣しようとしましたが、そうではありませんでしたやりたいことをやっているようです。

基本的に、テーブルの行ホバーで、現在行っているものとは異なる背景色を設定します。

これが私のアプローチです：

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3
  },
  table: {
    minWidth: 1020
  },
  tableWrapper: {
    overflowX: "auto"
  },
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    }
  }
});

return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}>
     {this.insertRow(n, isSelected, counter, checkbox)}

;

export default withStyles(styles)(EnhancedTable);

ご協力いただきありがとうございます！

reactjsstyles
20
Tim

TableRowのキーをclassNameとして定義し、ホバースタイルをそのクラス名にオブジェクトとして配置する必要があります。

const styles = theme => ({
  ...
  tr: {
    background: "#f1f1f1",
    '&:hover': {
       background: "#f00",
    },
  },
  ...
});

return <TableRow className={props.classes.tr} ...>

別の例では、次のようになります。

const styles = {
  tr: {
    background: "#f1f1f1",
    '&:hover': {
      background: "#f00",
    }
  }
};

function Table(props) {
  return (
    <Table>
      <TableRow className={props.classes.tr}>
        {"table row"}
      </TableRow>
    </Table>
  );
}

export default withStyles(styles)(Table);
42
Spleen