i have oracle jet table like that
<oj-table class='oj-table-data-cell-padding' id="table" aria-label="Departments Table"
data='[[dataSource]]'
display = "grid"
on-oj-before-current-row = "[[currentRowListener]]"
selectionMode = "{'row': 'single'}"
columns-default='{"sortable": "enabled"}'
dnd='{"reorder": {"columns": "enabled"}}'
style="width:100%;margin-bottom:40px; background-color: #1E90FF;"
columns='[{"headerText": "Course Id",
"field": "Id",
"headerClassName": "oj-sm-only-hide",
"className": "oj-sm-only-hide",
"resizable": "enabled"},
{"headerText": "Course Name",
"field": "CourseName",
"resizable": "enabled"},
{"headerText": "Description",
"field": "CourseDescription",
"resizable": "enabled"},
{"headerText": "other Details",
"field": "OtherDetail",
"headerClassName": "oj-sm-only-hide",
"className": "oj-sm-only-hide",
"resizable": "enabled"}
]'
</oj-table>
the problem is when i apply css , some of tags works and some are not for example the background-color didn't work
so how to add CSS styles in oracle jet ?
Your code is correct. The reason background-color didn't work is because the OJET developers wanted us to be able to change only basic stuff like the height and width of components.
If you want to change anything more than that, like the aesthetics of the components, you have to use their Theme Builder.
As a workaround, you could also inspect the elements and find the classes they use internally for a component and modify their values. For example,
.oj-table-element {
background-color: blue;
}