For example I need to customize appearance of DropDownList component. I can pass className property to this component, but styles for elements inside this component will be overwritten by defaults anyway.
I can pass custom components in itemRender property to override default appearances, but those are only injected inside default styled one instead of overwriting it.
The only way that's working for me now is to override default styles in css with !important, but that's an anti-pattern I'd like to avoid in a large scale commercial project. I can't find any detailed information in the documentation, examples cover only a fraction of cases, and other cases are not analogical.
Am I missing something obvious? Thanks!
3 Answers, 1 is accepted
Thank you for sharing the approaches that were already tested.
As the DropDown and many other components have a complex rendering constructed with many elements, changing the appearance will involve modifying the CSS rules.
Here I have an example that shows how to modify many parts of the DropDown with specific selectors without important:
https://stackblitz.com/edit/react-99sgzk-eqidke?file=index.html
.k-dropdown>.k-dropdown-wrap{ border: none; background-color: red;}.k-dropdown-wrap>.k-clear-value,.k-dropdown-wrap:hover >.k-clear-value,.k-dropdown-wrap.k-state-focused > .k-clear-value{ display:none ;}.k-popup { color: blue; background-color:red;}.k-list>.k-item:hover { background-color:blue ;}.k-dropdown:hover .k-select,.k-dropdown .k-select,.k-dropdown .k-input { background-color: red; background-image: none ;}.k-dropdown > .k-dropdown-wrap { box-shadow: none;}Regards,
Stefan
Progress Telerik
Rank 1
Thank you for your response.
The approach of overwriting css rules is problematic, because my client wants to have few different themes that can be dynamically changed by the user at any time.
Reading documentation I came to the conclusion that the only way to change Kendo component appearance is by overwriting classes. It's not possible to use any sort of dynamic theme system, since it would require Kendo components to be styleable with a json passed by props and none of this functionality is implemented.
Please confirm if my understanding is correct, so I can get back to my client with proper information.
Thanks for your help!
Thank you for the additional details.
We have a theme builder tool that can create customized themes.
The different themes can be created inside this tool. Then based on the user choice, the different CSS files can be loaded dynamically to have dynamic themes
https://themebuilder.telerik.com/kendo-react-ui
Regards,
Stefan
Progress Telerik