Styled Components support?

8 posts, 0 answers
  1. Antonios
    Antonios avatar
    5 posts
    Member since:
    Mar 2019

    Posted 14 Mar 2019 Link to this post

    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?
  2. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 15 Mar 2019 Link to this post

    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
  3. Antonios
    Antonios avatar
    5 posts
    Member since:
    Mar 2019

    Posted 18 Mar 2019 in reply to Stefan Link to this post

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

  4. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 20 Mar 2019 Link to this post

    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
  5. Antonios
    Antonios avatar
    5 posts
    Member since:
    Mar 2019

    Posted 20 Mar 2019 in reply to Stefan Link to this post

    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!

  6. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 21 Mar 2019 Link to this post

    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
  7. Jyoti
    Jyoti avatar
    1 posts
    Member since:
    Jan 2021

    Posted 05 Jan in reply to Stefan Link to this post

    Can Material UI design be achieved using kendo-react?
  8. Stefan
    Admin
    Stefan avatar
    3006 posts

    Posted 05 Jan Link to this post

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

Back to Top