html 材料-用户界面表:如何对表格元素进行样式更改

kpbpu008  于 2022-12-09  发布在  其他
关注(0)|答案(4)|浏览(157)

我正在使用“material-ui”,并试图让一个表格元素在元素具有特定值时改变颜色。下面是我尝试的代码,如果单元格值是“Out of Zone”,背景应该变成红色。表格渲染很好,但切换颜色变化不起作用,为什么会这样(或者我的方法完全错误)?

function renderRowColumn(row, column) {
    if (row.status == "Out of Zone") {
        return (
            <TableRowColumn className="ae-zone">
                {row[column.name]}
            </TableRowColumn>
        )
    }
    return (
        <TableRowColumn>
            {row[column.name]}
        </TableRowColumn>
    )
}

在style.css中:

.ae-zone {
    background-color: '#e57373';
    font: "white";
}
lvmkulzt

lvmkulzt1#

您在css选择器上的特性不够高。呈现的TD元素具有内联样式,其中background属性被继承,这将覆盖您的类样式。
有没有什么原因,因为你已经有了分离出来的逻辑,你不只是使用内联样式的东西这样。

<TableRowColumn style={{backgroundColor:'red', color: 'white',}}>{row[column.name]}</TableRowColumn>

这绝对是工作良好,我测试了它。
你的另一个选择是把!important添加到你的css中。

td.ae-zone {
  background-color: '#e57373' !important;
  color: "white" !important;
}

我想如果我必须选择的话,我会推荐第一个,因为它更干净。

7hiiyaii

7hiiyaii2#

不要在css中的颜色值周围加上引号:

.ae-zone {
    background-color: #e57373;
    color: white;
}

而且,它是color: white,而不是font: white

rqdpfwrv

rqdpfwrv3#

大多数情况下Table采用默认样式,所以如果样式没有被应用,尝试将!important附加到样式中。

.ae-zone {
    background-color: '#e57373' !important;
    color:red;
}
dwbf0jvd

dwbf0jvd4#

还有另一种方法:

import { makeStyles } from "@mui/styles";

// Declare this bellow your import
const UseStyles = makeStyles({
    root: {
        "& .MuiTableBody-root": {
            backgroundColor: "#121212",
        },
    },
});

// Declare this after your declaration page 

const classes = UseStyles();

// Now in your Table, use the class : 
<Table className={classes.root}>
    <TableHead>
        {...}
    </TableHead>
</Table>

使用检查器,您可以从Material UI查看每个自动类,并在makeStyle中将它们作为目标。
请小心使用相同的程式码范例:

"& .MuiClassNameYouWantTarget" : {
    textAlign: "center",
},

相关问题