The SCSS files from the kendo-theme-material contain !important rule, that makes it difficult to override the styles in the consuming application.
We have a requirement to customize the DatePicker Kendo React component so that it has a border around all 4 sizes, as by default the theme has the border only on the bottom.
We have applied a new custom style to k-picker-wrap and added the
border-top-color: $datetime-border !important;
But due to the !import rule in the file
@progress\kendo-theme-material\scss\datetime\_layout.scss, line 15
the custom style that we applied in the consuming application does not get applied.
Please find screenshots with the details of the problem.
The screenshots indicate that the custom style for the border-top-color did not get overriden, and the box is missing the top border.
Kindly advise approach that we can use to customize the CSS styles that has !important CSS rule, so that we can override the styles defined in the material theme.