Styled Components support?

[Antonios]

Hello, are there any plans or maybe a way, to use styled components instead of the huge css / scss files, to style/theme the KendoUI Components?

[Stefan]

Hello, Antonios,

Could you please clarify the styled components support? Is it the integration of current components with style components concepts to modify the current styles or new components that use their style from objects compare to SCSS.

Also, current with the SCSS theme only the desired component styles can be imported to reduce the scss size:

https://stackblitz.com/edit/react-ms-5h7fgk?file=app%2Fcustom.scss

Regards,
Stefan
Progress Telerik

[Antonios]

Hello Stefan,

Although I would like "native" styled components support, so that I wouldn't have to use hard coded class names such as "k-link" etc. When I want to override a style or implement my own custom cell/header renderer... That's not my biggest issue.

 

I'll give you an example. Say I want to use The Data Grid and I do import only its SCSS

node_modules/@progress/kendo-theme-material/scss/grid.scss

that though in turn does @import "common/all"; which has lots of things that I might never use.

without using styled-components, we lose the ability to dynamically import / lazy load styles, on-demand.

 

yes, we can import scss "per component" but when some components have big stylesheets (in an attempt to cover all their features / use-cases, even though they might not be used), we end up with big style sheets...

[Stefan]

Hello, Antonios,

Thank you for the details.

Currently, the SCSS is indeed only separated based on components, not features. Importing only part of the SCSS assuming that a specific feature will not be used, could cause styling issues that may take a long time to debug. 

Still, as grid.scss imports more than one file, these internal imports can also be decomposed to smaller imports.

In order to provide a solution or log a feature request for improvements, please share how it is expected the component styles to be added?

Regards,
Stefan
Progress Telerik

[Antonios]

Sure!

I'd think that an improvement would be to "natively" support styled components for each component used.

For example. Just like today the Grid is one component with many sub components, similarly, with styled components, each of those sub components will have its own style. Say, the Filters / ColumnMenu / etc.

Using code splitting / lazy loading of components, the styles and the components themselves, will only be loaded if/when we need to use them. So, as long as we do not try to show the ColumnMenu or Filters for example, those components will not load and neither their stylesheets (since they're styled components).

Hope it makes sense.

Thanks!

[Stefan]

Hello, Antonios,

Thank you for the clarification.

I have raised an official public issue where the community can vote for this. Then based on its popularity we may implement it in a future version of the components:

https://feedback.telerik.com/kendo-react-ui/1401493-add-support-for-styled-components

Regards,
Stefan
Progress Telerik

[Jyoti]

Can Material UI design be achieved using kendo-react?

[Stefan]

Hello, Jyoti,

KendoReact has a material theme that follows the material design system guidelines:

https://www.telerik.com/kendo-react-ui/components/styling/theme-material/

The components will not look 100% the same, but they can be easily integrated. We have many users using KendoReact components in combination with Material UI.

We also have an integration article showcasing how our and Material UI components work and look in the same application:

https://www.telerik.com/kendo-react-ui/components/integration/material-ui/

Regards,
Stefan
Progress Telerik