umi + ant design pro+React 修改内部组件样式

因为umi(乌米)框架中很多组件都是封装好的,我们只需要配置属性就行了,但往往会有很多问题就是,样式不能满足公司需求

所以我们就是深度挖掘,调整样式!!!

举一个例子,我想要修改登录页面的样式,但是不管用/deep/ 或者 >>>,都不能控制到
后来发现

方法一:你把样式写在全局样式里,然后所有的属性都加一个 !important,就可以控制样式

但我觉得这种写法太麻烦且太粗暴,不到万不得已就不用这种方法

方法二 :用:global 就可以控制样式啦~优雅!!
如果用less写法的话

.container {
    background-image: url('../../assets/image/login_bg.png');
    background-repeat: no-repeat;
    // background-position: center 110px;
    background-size: 100% 100%;
    :global(.ant-pro-form-login-title) {
      color: #fff;
      font-size: 36px;
    }
    :global(.ant-pro-form-login-desc) {
      color: #ccc;
      // font-size: 36px !important;
    }
  }

:global是全局的意思,如果你只想局部或者说单页面使用的话,一定要控制在单页面的类属性下边

如果用scss写法的话

.container {
    background-image: url('../../assets/image/login_bg.png');
    background-repeat: no-repeat;
    // background-position: center 110px;
    background-size: 100% 100%;
    :global{
      // 写样式
    }
  }

scss还是用嵌套的方式,会更方便一点,但是因为ant design本身优先使用less,就没有使用scss

这样就解决了!!!!完美~