react模块文件使用全局class，并且可以修改全局的class属性而且不影响全局样式

最新推荐文章于 2024-09-01 23:05:33 发布

晨晨快跑

最新推荐文章于 2024-09-01 23:05:33 发布

阅读量5.6k

点赞数 1

分类专栏：技术文章标签： react antd :global 覆盖全局样式并且不影响全局样式

本文链接：https://blog.csdn.net/baidu_38027860/article/details/87092161

版权

技术专栏收录该内容

118 篇文章 0 订阅

订阅专栏

简单描述业务场景：

项目是基于create-react-app搭建的，后续添加的css_modules及less等相关配置。

在写一些通用的组件的时候，我们往往需要单独提取一个全局的样式文件，用于存放所有通用的样式，模块内部则自己用自己的样式文件，以达到模块化开发的目的。

但是有些时候我们却需要在某个模板文件中修改全局的样式，例如我全局做好了媒体查询配置，但是偏偏有一个页面的布局稍稍有些不同，然而如果我修改全局class的话，其他页面的布局就会混乱，之前碰到这样的问题我都是在单独在全局文件中新写一个单独的class用于独特页面的使用，但是这样往往会造成项目越大代码越沉冗，还有一种情况是应用第三方组件库，例如antd，你的模板中用到了antd的组件，那么很容易就会被antd所写的全局样式影响到，所以在模板中需要覆盖全局样式的情况算是比较常见的问题，日常应用如下：

import React from 'react';                          
import ECompontent from '../../../ECompontent/ECompontent'         
import connect from '../../../reducers/connect'
import listStyle from './BettingList.less'
import { Tabs } from 'antd';
import { StickyContainer, Sticky } from 'react-sticky';
import CurrentBets from './CurrentBets'
import MyBet from './MyBet'
const TabPane = Tabs.TabPane;
const renderTabBar = (props, DefaultTabBar) => (
  <Sticky bottomOffset={80}>
    {({ style }) => (
      <DefaultTabBar {...props} style={{ ...style, zIndex: 1, 
                                        background: '#3C396D' , 
                                        border : "0" ,
                                        height : "60px" ,
                                        paddingLeft : "20px" ,
                                        margin : "0",
                                        position: "relative",
                                        left : 0 ,
                                        borderRadius: "8px 8px 0 0 ",
                                        }} />
    )}
  </Sticky>
);
class BettingList extends ECompontent{
    constructor(){
        super();
    }
    render(){
        const Intl = this.props.lang.get;
        return (
            <div className={listStyle.root}>
                <StickyContainer>
                    <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
                        <TabPane tab={Intl("BettingList_tab1")} key="1">
                            <CurrentBets />
                        </TabPane>
                        <TabPane tab={Intl("BettingList_tab2")} key="2">
                            <MyBet />
                        </TabPane>
                    </Tabs>
                </StickyContainer>
            </div>
        )
    }
}

export default connect(BettingList , "lang");

代码中BettingList.less的这个模板文件是我自己写的，里面存放的是针对这个模板文件写的样式，但是我在这个文件里面想修改antd的样式却办不到，因为css_modules会将我设置的class名转成哈希以达到样式名不重复而实现模块化的效果，但是我的这个模板文件还真真实实的需要修改模板文件中应用的antd样式，而且注意最重要的一点是，绝对不能影响到全局antd的样式，否则你的代码绝对会乱了套了，最后的解决办法如下：

// BettingList.less
.root {
  // 修改全局类样式，并且因为最外层是模板root的类限制，所以修改后的全局样式只会在当前模板生效。
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

完美解决，有问题留言，我看到了会回复。