如何更改材质ui表中所选行的文本颜色

Posted 2023-02-22

【中文标题】如何更改材质ui表中所选行的文本颜色

【英文标题】：How to change the text color of the selected row in material ui table

【发布时间】：2019-09-15 01:42:04

【问题描述】：

我正在尝试更改行文本的颜色和选择时行的背景颜色。

我可以成功更改背景颜色，但无法更改文本颜色。

<TableRow
        className=classes.tableBody
      >

tableBody: 
    "&:focus": 
      color: "yellow !important",
      backgroundColor: "#3D85D2 !important",
    ,
  ,

【问题讨论】：

如果您能分享一个重现问题的CodeSandbox，将会很有帮助。

@RyanCogswell ：在此处添加代码 codesandbox.io/s/o739857l3z。感谢您的调查。

【参考方案1】：

背景颜色在TableRow中控制。为了获得正确的特异性（在覆盖 Material-UI 样式时，您永远不需要利用“！important”），您需要利用类似于TableRow 中所做的“悬停”类。

颜色控制在TableCell，所以你需要控制它的级别。

对于一个可行的解决方案，您可以使用以下样式：

const styles = theme => (
  tableRow: 
    "&$hover:hover": 
      backgroundColor: "blue"
    
  ,
  tableCell: 
    "$hover:hover &": 
      color: "pink"
    
  ,
  hover: 
);

然后在渲染中：

            <TableRow
              hover
              key=row.id
              classes= hover: classes.hover 
              className=classes.tableRow
            >
              <TableCell
                className=classes.tableCell
                component="th"
                scope="row"
              >
                row.name
              </TableCell>

这是基于您的沙盒的工作版本：

这是一个类似的例子，但使用“selected”而不是“hover”：

https://codesandbox.io/s/llyqqwmr79

这使用以下样式：

const styles = theme => (
  tableRow: 
    "&$selected, &$selected:hover": 
      backgroundColor: "purple"
    
  ,
  tableCell: 
    "$selected &": 
      color: "yellow"
    
  ,
  selected: 
);

还有一些状态：

 const [selectedID, setSelectedID] = useState(null);

并将 TableRow 渲染更改为：

            <TableRow
              hover
              key=row.id
              onClick=() => 
                setSelectedID(row.id);
              
              selected=selectedID === row.id
              classes= selected: classes.selected 
              className=classes.tableRow
            >

Material-UI v4 将包含some changes，这将使覆盖样式变得相当容易（并且更容易弄清楚如何在不查看源代码的情况下成功完成）。

在 Material-UI v4 中，我们可以为 selected state ("Mui-selected") 和 TableCell ("MuiTableCell-root") 使用全局类名，然后我们只需要应用一个类到 TableRow：

const styles = (theme) => (
  tableRow: 
    "&.Mui-selected, &.Mui-selected:hover": 
      backgroundColor: "purple",
      "& > .MuiTableCell-root": 
        color: "yellow"
      
    
  
);

【讨论】：

我们正在使用下一版本的材质ui。谢谢

如何将焦点设置到该行？为了使用焦点，行需要具有焦点，默认情况下它们不是。您最好利用 TableRow 上的“选定”概念而不是使用焦点。

“下一个”版本不会包含我引用的更改，直到下一个 alpha 或 beta 版本出现（通常每周都有一个版本），因为它今天刚刚合并。

请参考沙盒代码，了解我如何使用焦点更改行选择的颜色和背景颜色。 codesandbox.io/s/o739857l3z 它不适用于此处的代码，但在我的项目中可以。我从@RyanCogswell 提供的建议中得到了帮助。我尝试使用 TableRow 提供的选定道具，但它改变了我所有行的样式，这是我不想要的。谢谢。

@wal 样式不能直接应用于selected CSS 类，因为它们没有足够高的特异性。您可以在此处的文档中找到讨论的一些内容：material-ui.com/customization/components/#pseudo-classes。我在答案的末尾添加了一个替代解决方案，它利用 v4 方面使用稍微简单的语法。

【参考方案2】：

这是唯一对我有用的解决方案

const styles = theme => (
  tableRow: 
   '&&:hover': 
      backgroundColor: '#0CB5F3',
    ,
   ,
);

   <TableRow
      hover
      className=classes.tableRow
    >

【参考方案3】：

const useStyles = makeStyles((theme) => (
 selected: 
    backgroundColor: "green !important",
    "&:hover": 
      backgroundColor: "green !important",
    ,
  ,
));

 const classes = useStyles();
<TableRow selected classes=selected: classes.selected,/>