Question

我正在材质表上尝试一些渐变设计，尽管我无法在行上呈现正确的颜色组合，但是在表标题上却获得基于列的结果，但我已经附上了输出的屏幕截图

这是相同的代码

function RowStyling() {
  return (
    <MaterialTable
      title="Row Styling Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      options={{
        rowStyle: {
            background: 'linear-gradient(to right,#137a8b,#30e4fb)',
           border: '2px white solid',
           borderRadius: '50px'
        },
         headerStyle: {
                background: 'linear-gradient(to right,#137a8b,#30e4fb)',
                color: '#FFF',
              }
      }}
    />
  )
}

我需要做些什么才能使其看起来像行，您可以设置材质表样式here

Answer 1

Ciao，我认为这是material-table库上的错误。我尝试在this codeandbox示例中使具有相同行的标题颜色呈线性渐变，但发现：

如果在headerStyle中设置了background: "linear-gradient(to right,#137a8b,#30e4fb)"，则此样式将应用于标题单元格，而不应用于标题（这是您的情况）。实际上，通过检查元素，您将看到：

线性渐变将应用于th样式，而不是预期的tr样式。

如果设置backgroundImage: "linear-gradient(to right,#137a8b,#30e4fb)"，也会发生同样的事情。
如果您将backgroundColor: "red"设置为相同的结果：样式将应用于单元格，而不是标题（但使用固定颜色，似乎所有标题都具有相同的颜色:)）。

注意：我也尝试将MaterialTable包装到Material UI ThemeProvider中，以覆盖CSS类，但没有得到任何结果：（

编辑

要使用ThemeProvider覆盖课程，您可以：

定义主题对象并以这种方式覆盖您要覆盖的tha类：

const Theme = {
 palette: {
   primary: {
     contrastText: "#FF0000",  // this is just a color (red for example)
     dark: "#FF0000",
     main: "#FF0000",
     light: "#FF0000"
  }
},
overrides: {   // in this object you can override css classes
 MuiTableHead: {   // overriding of MuiTableHead
   root: {  //overriding root
     background: "black"
   }
 }
}
};

将此对象传递给createMuiTheme函数：
```
const theme = createMuiTheme(Theme);
```

将MaterialTable包裹在ThemeProvider组件中（通过theme）：

<ThemeProvider theme={theme}>
   <MaterialTable
    ....
    />
</ThemeProvider>

但是，即使background: "black"是组件样式，也可以通过这种方式

背景保持红色（如headerStyle中的设置）

Answer 2

我首先检查了元素并找到了它的类，并在材质UI的withStyles函数中对其进行了定义，以覆盖其CSS，如下面的代码所示。

const styles = withStyles ({
  root: {
    //display: "flex"
    "& .MuiTypography-h6": {//Title in MTable
      color: "#545454"
    },
    '& .MuiPaper-root': {//table header root,where title and toolbox relies 
      color: 'black',
      transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
      backgroundColor: 'white',
      borderRadius: ' 10px;',
      padding: '10px'
    },
    "& .MuiTableRow-head": {//title columns
      background: "linear-gradient(to right,#137a8b,#30e4fb) !important",
      border: '2px white solid',
      borderRadius: '10px',

    },
    "& .MuiTableCell-head": {//table cells,all
      background: "none"
    }
}
});

之后，将该材料表包装在具有css类的div标签中：

    <div className={classes.root}>
             <MaterialTable/>
      </div>

注意：您可以在功能组件中使用makeStyles，而在基于类的组件中使用withStyles

将react-js材质表的headerStyle列转换为行

2 个答案: