要修改Ag-Grid中单个列头的CSS样式,可以使用列定义对象中的headerClass属性。
首先,在列定义对象中添加一个headerClass属性,该属性的值为要应用于列头的CSS类名。例如,要修改列头的背景颜色,可以添加一个名为"custom-header"的CSS类:
var columnDefs = [
{headerName: "Column 1", field: "col1", headerClass: "custom-header"},
{headerName: "Column 2", field: "col2"},
{headerName: "Column 3", field: "col3"}
];
接下来,在CSS文件中定义名为"custom-header"的样式:
.custom-header {
background-color: red;
color: white;
font-weight: bold;
}
在上面的示例中,我们将列头的背景颜色设置为红色,文本颜色为白色,字体加粗。
当然,您也可以在JavaScript中直接使用style属性设置列头的样式。例如:
var columnDefs = [
{headerName: "Column 1", field: "col1", headerClass: "custom-header", headerStyle: {'background-color': 'red', 'color': 'white', 'font-weight': 'bold'}},
{headerName: "Column 2", field: "col2"},
{headerName: "Column 3", field: "col3"}
];
请注意,上述示例中的样式只应用于特定的列头,您可以根据需要为每个列头定义不同的样式。