react 如何修改ant-design的样式

HTML代码

 <div className={styles.tabs}>
          <Tabs  
                  onChange={(key) => this.onChange(key,'leftNavSource')}
                  activeKey={'0'}
                  type="editable-card"
                  onEdit={(targetKey, action) => this.onEdit('leftNavSource', targetKey, action)}
                  hideAdd 
                >
                  {panes.map(pane => <TabPane
                    tab={pane.title === '---' ? this.handleGetMenuNameByPath(pane.key, leftNavSource) : pane.title}
                    key={pane.key}
                    closable={panes.length !== 1}
                  >{pane.content}</TabPane>)}
                </Tabs>
        </div>

样式代码--加上 :global即可

.tabs {
      flex: 1;
      height: 3.2em;
      line-height: 2.5em;
      color: @light-text-color;
      padding: 0 16px;
      position: relative;
      .ellipsis; 
      
      :global(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active){
          background-color: #1B98E0;
          color:#fff;
      }
      :global(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active.ant-tabs-tab .ant-tabs-close-x){
        color: #fff;
      }  
    }