Customize DateRangePicker

[Lara Marie]

I am trying to customize a few things in the Date Range Picker component namely the font, highlight colour, box shadow, etc. 

I was trying to do this by customizing a theme and following the steps at https://www.telerik.com/kendo-react-ui/components/styling/theme-builder/. I copied the downloaded all.css file into the project and imported it in the .js file which we are defining the DateRangePicker component. However, I don't seem to see any differences being applied to the styling (specifically, the colours remained the same). Moreover, if I manually edit the css file in VS are the changes applied to the styling?

[Stefan]

Hello, Lara,

Thank you for the details.

This sounds as if the file with the new styles is either not imported properly or there is another KendoReact style file imported after it.

Is it possible to send us the application where this is observed and we will be happy to inspect it further?

Regards,
Stefan
Progress Telerik

[Lara Marie]

I think it is working now. I'm importing the blue-pink-light.css file in the js file and styling seems to be affected. However, when I manually update the css file in VS the changes does not seem to be taken. Can you help me with this please?

[Stefan]

Hello, Lara,

I`m glad to hear that there is progress on this.

As for the changes not being displayed, are these changes made to the blue-pink-light.css file or some other file?

In general, most tools like create-react-app or similar does not refresh the application after changes to the style file, and the browser window has to be refresh manually to see the changes. Please check if this is the case.

Regards,
Stefan
Progress Telerik

[Lara Marie]

Hi, 

Yes infact after manually restarting react, changes were updated.

Thanks for your help :)

Lara