I have added this to my App.scss which I import into App.tsx:
$border-radius: 2px;
$primary-palette-name: lightgreen;
$secondary-palette-name: indigo;
$theme-type: light;
$adjust-contrast: false;
$primary: #bed00c;
$secondary: #026299;
@import '~@progress/kendo-theme-material/scss/all';
1 Answer, 1 is accepted
Hello, Bernd,
After more investigation, I noticed the import that is used for the theme, is not the recommended one:
https://www.telerik.com/kendo-react-ui/components/styling/customizing/#toc-using-the-build-process-of-the-application
When we want to import the full theme we have to use the SCSS from the dist folder. We are using the scss folder only when we want to import individual components. Changing the import fixed the error on my end:
$border-radius: 2px;
$primary-palette-name: lightgreen;
$secondary-palette-name: indigo;
$theme-type: light;
$adjust-contrast: false;
$primary: #bed00c;
$secondary: #026299;
@import "~@progress/kendo-theme-material/dist/all.scss";Regards,
Stefan
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/.
Rank 5
Bronze
Bronze
Bronze
Ok, I updated all telerik components to the latest and then everything worked like a charm. :-)
The only thing was that the color picker now showed "under" the dialog window but I could fix this by adding a bigger z-index to the class .k-animation-container-shown.
Thanks!
Hello,
Could you please share the package.json of the application?
Sometimes, a different version of a package required a specific version of another package to be compatible.
Hi!
Sure! package.json attached. Had to rename it to package.txt to be able to upload it...
Thanks!
Hello,
Thank you for the packages. I tested this locally, but it was working on my end. I assume we are missing an important detail.
Could you please confirm that removing this like from the App.scss will resolve the issue:
@import '~@progress/kendo-theme-material/scss/all';Hi.
Yes, removing this lets me compile the app.
I also checked in the node-packages and the file is available there and readable too.
I also created my own theme with your theme builder and added the .css file to the project now and that works of course. What is the .json file for, that gets generated by the theme builder? I haven't added that one, maybe that's the issue?
Adding to the weird behavior: Since a few days, this is how my color picker looks like (see attached). Here is the code:
import { ColorPicker, ColorPickerChangeEvent, } from '@progress/kendo-react-inputs'; import { hex2rgb, rgb2hex } from '../Helpers/DataHelpers'; function CustomColorPicker(fieldRenderProps: any) { const { value, onChange, ...others } = fieldRenderProps; const gradientSettings: { opacity: boolean } = { opacity: false, }; const onValueChange = (event: ColorPickerChangeEvent) => { onChange({ value: rgb2hex(event.value) }); }; return ( <> <div style={{ float: 'left', marginRight: 10, marginTop: 5 }}> <span style={{ fontSize: '16px', color: 'rgb(115, 115, 115)' }}> {' '} {others.label}:{' '} </span> </div> <ColorPicker defaultValue={ value ? hex2rgb(value, '1') : hex2rgb('#000000', '1') } gradientSettings={gradientSettings} view={'gradient'} onChange={onValueChange} /> </> ); } export default CustomColorPicker;If I remember it correctly, this behavior started after I ran an