The setColumnStyle function is available in many hooks and enables developers to style individual fields. It supports virtually all CSS styles, but keep in mind that JavaScript requires styles to be written in camelCase instead of kebab-case.
In JavaScript, kebab-case is not allowed for property names because hyphens are not valid in identifiers. For example, padding-top is not a valid property name, so it must be written as paddingTop. Make sure to follow this format when applying styles.
CSS example written in kebab-case #
input: {
font-size: 1em,
color: #ccc,
background-color: white,
border: 1px solid black,
}Same CSS written in camelCase #
input: {
fontSize: "1em",
color: "#ccc",
backgroundColor: "white",
border: "1px solid black",
}This function supports three properties:
- control: to style the root element
- label: to style the field label
- input: to style the input element
- hint: to style the field hint
Styling an input field, label and hint #
setColumnStyle("deptno", {
control : {
border: "1px solid #ddd",
},
label: {
fontWeight: 900,
},
input: {
color: "#4399fa",
backgroundColor: "#efefef",
},
hint: {
fontSize: "0.7rem",
}
})
