Vous pouvez suivre votre propre chemin : mode KendoReact sans style

Le mode sans style vous permettra de contrôler quels composants KendoReact utilisent les classes CSS par défaut et lesquels vous souhaitez styliser vous-même.

S’il y a une chose que nous pouvons supposer en toute sécurité à propos des développeurs React, c’est qu’ils préfèrent faire les choses à leur manière. Après tout, l’un des principaux avantages de l’approche React est le fait qu’il s’agit d’une bibliothèque et non d’un framework : l’approche la moins prescriptive, avec des piles NON incluses, permet aux développeurs de choisir leur pile technologique comme ils le souhaitent.

Ce qui est bien avec Progress KendoRéagir c’est qu’il peut vous rencontrer là où vous êtes, quelles que soient vos préférences personnelles. Si vous aimez garder les choses légères et fonctionner avec Vite, KendoReact peut le faire. Mais si vous préférez utiliser un framework React complet, nous le faisons aussi ! Et maintenant, cela s’étend également au style.

Certains préfèrent l’approche instantanée d’une bibliothèque CSS comme Tailwind ou Uno, tandis que d’autres aiment écrire leur CSS à la main… OK, c’est peut-être juste moi. Quel que soit celui toi préférez, le nouveau KendoReact Mode sans style vous permet d’exploiter toute la puissance et les fonctionnalités des composants KendoReact que vous connaissez et aimez, sans avoir à travailler avec (ou autour) nos classes CSS par défaut.

Qu’est-ce que le mode sans style ?

Le mode KendoReact Unstyled supprime les classes CSS KendoReact par défaut des composants. Cela vous permet de :

• Appliquez vos propres styles personnalisés en utilisant la convention de dénomination que vous préférez pour vos classes CSS
• Évitez les styles conflictuels ou le besoin d’écraser les valeurs par défaut de KendoReact (plus besoin de !importants)
• Réduisez la taille de votre lot en incluant uniquement les styles exacts dont vous avez besoin

Vous pouvez même utiliser un mélange de nos thèmes prédéfinis et de nos composants sans style, s’il n’y en a que quelques-uns que vous souhaitez styliser différemment. C’est super adaptable, incroyablement flexible et, bien sûr, facile à mettre en œuvre. Jetons un coup d’oeil.

Comment utiliser le mode sans style

Pour utiliser des composants en mode Unstyled, tout ce que vous avez à faire est d’envelopper le composant dans le fournisseur UnstyledContext et de transmettre l’objet de classes CSS prédéfini en tant que valeur.

<UnstyledContext.Provider value={customStyles}>
    <Button>Learn More</Button>
</UnstyledContext.Provider>

Cela en fait un jeu d’enfant de combiner KendoReact avec votre bibliothèque CSS tierce préférée. En fait, il y a un excellent exemple d’application notre équipe de développement a été créée pour montrer à quel point il est simple d’intégrer Tailwind. Découvrez-le ou utilisez-le comme base pour votre propre projet !

Pourquoi utiliser le mode sans style ?

Nous avons déjà parlé des avantages de pouvoir exploiter une bibliothèque CSS tierce, mais pourquoi pourriez-vous opter pour le mode Unstyled ?

• Vous avez déjà investi du temps et de l’énergie dans la création d’un système de conception. Désormais, vous n’avez plus besoin de « traduire » les valeurs et les noms entre votre propre système et le système KendoReact : plus de conflits de noms, ni de rappel que vous l’appelez « principal » alors que nous l’appelons « principal ». Faites en sorte que tout le monde parle le même langage et unifie le code et la conception.
• Il y a ce composant embêtant sur lequel vous rencontrez des difficultés pour écraser les styles par défaut. Parfois, il y a une petite chose que vous souhaitez simplement ajuster, mais elle est intégrée au thème par défaut. Et bien sûr, vous pouvez en écrire méchant CSS pour y accéder… ou vous pouvez simplement désactiver les classes par défaut pour ce composant et vous épargner des ennuis.
• La taille et les performances du bundle sont une priorité absolue. Écoutez, la dure vérité est qu’il faut un certain temps parcelle de CSS pour styliser plus de 100 composants professionnels, beaux, accessibles et réactifs, ce qui signifie que nos thèmes peuvent être un peu volumineux. Si vous êtes dans une situation où la taille du bundle est importante, il peut être utile de ne pas importer le thème par défaut.

Quels composants KendoReact prennent en charge le mode sans style ?

À l’heure actuelle, les composants suivants peuvent être utilisés avec le mode Unstyled :

• Animations
• Bouton
• Groupe de boutons
• Bouton déroulant
• Icônes SVG
• DateEntrée
• DateHeurePicker
• Sélecteur de temps
• Formulaire
• Saisir
• Zone de texte
• Boîte de texte masquée
• Bouton Radio
• Groupe Radio
• Étiquette
• Étiquette flottante
• Indice
• Erreur
• Surgir

Nous continuerons à enrichir cette liste, alors gardez un œil sur nos documents pour toutes les dernières informations. Et si vous avez un composant que vous souhaiteriez que nous priorisions, faites-le-nous savoir via le Portail de commentaires KendoReact !