This is a migrated thread and some comments may be shown as answers.

Styled Components support?

7 Answers 53 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Antonios
Top achievements
Rank 1
Antonios asked on 14 Mar 2019, 02:50 PM
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?

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 Mar 2019, 06:23 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Antonios
Top achievements
Rank 1
answered on 18 Mar 2019, 01:57 PM

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...

0
Stefan
Telerik team
answered on 20 Mar 2019, 07:32 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Antonios
Top achievements
Rank 1
answered on 20 Mar 2019, 01:38 PM

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!

0
Stefan
Telerik team
answered on 21 Mar 2019, 07:13 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jyoti
Top achievements
Rank 1
answered on 05 Jan 2021, 10:47 AM
Can Material UI design be achieved using kendo-react?
0
Stefan
Telerik team
answered on 05 Jan 2021, 12:02 PM

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

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/.

Tags
General Discussions
Asked by
Antonios
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Antonios
Top achievements
Rank 1
Jyoti
Top achievements
Rank 1
Share this question
or