简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison> interface Web> js tutoriel> le corps du texte

怎么修改react的antd默认样式

coldplay.xixi
Libérer： 2020-12-22 16:09:21
original
4523 Les gens l'ont consulté

react中修改antd默认样式的方法：首先给table添加一个div父元素，并设置个className；然后设置这个样式内的table表头样式。

怎么修改react的antd默认样式

本教程操作环境：windows7系统、React17版，该方法适用于所有品牌电脑。

react中修改antd默认样式的方法：

最近在做react+antd项目。不可避免的遇到了修改antd默认样式的问题。

比如，table组件的表头背景色设置，如果直接使用元素样式，会修改整个项目的table。这里我用的方法是，给table添加一个div父元素，给他设置个className，然后设置这个样式内的table表头样式。

我使用的.less预编译。

 

         Copier après la connexion
        

        
.boxW,.normalB { :global { .ant-table-thead > tr > th, .ant-table-tbody > tr > td { padding: 8px 8px !important; } .ant-table-thead > tr > th { background-color: rgb(192, 244, 248); } .ant-table-thead > tr > th:hover { background-color: rgb(192, 244, 248); } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover { background: rgb(192, 244, 248); } } }

        

         Copier après la connexion
        

       
这样就可以只修改到当前文件里table的样式了。
这里顺便记录一下.less的样式继承，通过（&:extend(被继承class名)）。

        
.boxW { min-width: 1150px; } .normalB { &:extend(.boxW); &:extend(.boxBorder); }

        

         Copier après la connexion
        

       

        
相关免费学习推荐：javascript（视频）

       
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

      

       Étiquettes associées：
       

        react
       

      

      

       source：php.cn
      

     

      Article précédent：react如何控制显示与隐藏
      Article suivant：大神总结如何在JavaScript中使用对象解构
     

      

       Déclaration de ce site Web
      

      

       Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
      

     

      

       Derniers articles par auteur
      

      
     

      

       Derniers numéros
      

      

       

        

         Comment comprendre les éléments contrôlés en réaction
         Comment comprendre les éléments contrôlés en réaction ? Utiliser le contrôle de l’État ? C...
         

          

           Depuis 2023-11-16 14:51:10
          

          

           

            0
           

           

            1
           

           

            106
           

          

         

        

       

       

       

        

         标题重写为：Importation de composants dynamiques dans Vite avec React et TypeScript provoquant un échec lors de l'actualisation rapide
         J'essaie de créer un formulaire en plusieurs étapes et je mets les données dans un fichier...
         

          

           Depuis 2023-11-10 20:45:29
          

          

           

            0
           

           

            1
           

           

            505
           

          

         

        

       

       

       

        

         Erreur rencontrée : un problème est survenu lors de l'exécution de npm install && npm run dev - Vite - Laravel UI React
         Salut à tous, aujourd'hui j'ai rencontré un problème, lorsque j'ai installé laravelui en u...
         

          

           Depuis 2023-11-10 17:43:07
          

          

           

            0
           

           

            1
           

           

            278
           

          

         

        

       

       

       

        

         Utilisation de l'actif lame de Laravel 8 pour afficher des images mais chargement à partir du sous-dossier de ressources
         Je suis assez nouveau sur Laravel, alors soyez patient avec moi. Je copie un framework que...
         

          

           Depuis 2023-11-09 12:47:02
          

          

           

            0
           

           

            1
           

           

            314
           

          

         

        

       

       

       

        

         Qu'est-ce que chrome-extension:// installHook.js en cours de téléchargement sur la page À propos de moi ?
         J'ai récemment créé plusieurs pages Web à l'aide de Three.js. Lorsque je vérifie ce qui es...
         

          

           Depuis 2023-11-04 23:40:49
          

          

           

            0
           

           

            2
           

           

            282
           

          

         

        

       

       

      

     

      

       

        Rubriques connexes
       

       Plus>
      

      

       
      

     

    

     

      Recommandations populaires
     

     

      
     

    

    

     

      

       Tutoriels populaires
      

      Plus>
     

     

      

       

        Tutoriels associés
        

       

       

        Recommandations populaires
        

       

       

        Derniers cours
        

       

      

      
      
      
     

    

    

     

      

       Derniers téléchargements
      

      Plus>
     

     

      

       

        effets Web
        

       

       

        Code source du site Web
        

       

       

        Matériel du site Web
        

       

       

        Modèle frontal
        

       

      

      
      
      
      
     

    

   

   

    

     

      

       

        À propos de nous
        Clause de non-responsabilité
        Sitemap
        

       

       

        Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！