React- MaterialTable - 如何根据标题文本为所有数据列着色答案

【问题标题】：React- MaterialTable - How to Color all data column based on header textReact- MaterialTable - 如何根据标题文本为所有数据列着色
【发布时间】：2021-02-11 10:13:30
【问题描述】：

我在反应组件 MaterialTable 中创建了数据。问题是我想根据标题文本为列文本着色。例如，我想为名为“Info”的列着色，并将此标题下的所有数据着色为橙色。有办法吗？

【问题讨论】：

标签： reactjs material-table

【解决方案1】：

你可以像这样改变组件的样式：

<Component style={{ color: 'red' }} />

https://www.w3schools.com/react/showreact.asp?filename=demo2_react_css_inline

【讨论】：

React 组件：数据应该用header条件过滤吗？风格是如何做到的？
你看过他们关于样式的文档吗：material-table.com/#/docs/features/styling
谢谢。我根据文档做了一些调整，它有效:).if (key === 'info') return { title: titleValue, field: fieldValue, cellStyle:{ backgroundColor: '#039be5', color: '#FFF' } }

【解决方案2】：

只需根据您的要求自定义样式的行和列

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white
  },
  body: {
    color: "white",
    fontSize: 14
  }
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

// Function / Class

// return 

 <StyledTableCell style={{ backgroundColor: "green" }} align="right">  text <StyledTableCell/>

这是我的沙盒示例 ==>>> [1]：https://codesandbox.io/s/material-demo-forked-n6rtt?file=/src/App.js

【讨论】：