Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 16 Feb 2021 11:29 by ADMIN
Alexander
Created on: 09 Feb 2021 20:00
Category: KendoReact
Type: Bug Report
0
Theme customization is awkward and troublesome due to usage of the !important CSS rule in the KendoReact material theme

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;

style

.k-picker-wrap-sphera {
        ...
        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.

Attached Files:
1 comment
ADMIN
Silviya
Posted on: 16 Feb 2021 11:29

Hello Alexander,

Currently, our Kendo Theme Material applies a "flat" styling variant for the input. So, these styles are necessary for the theme. We have a task logged in the Kendo Themes repository for implementing other styling options such as filled, outlined. You may find more information in the following issue: https://github.com/telerik/kendo-themes/issues/1939.

For now, I can suggest adding k-datepicker class to your selector and the styles should be applied: 

.k-datepicker .k-picker-wrap-sphera {
    border-width: 1px;
    border-color: #c6ccd6 !important;
}

I also made a demo showcasing the approach: https://stackblitz.com/edit/react-fh2xdd-jvylgq?file=index.html

Let me know if this works for you.

Best Regards,
Silviya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category