强制修改CSS的属性style

1. 直接在js代码中强制修改style ，达到布局的要求

   代码里面的style（style={{ paddingLeft: '15px', paddingRight: '15px' }}）可以覆盖掉css中的styles.resetBtn             

<Button
  type="primary"
  className={styles.resetBtn}
  style={{ paddingLeft: '15px', paddingRight: '15px' }}  强制修改padding
  onClick={() => { this.reset(); }}
>重置</Button>

2. 获取页面元素的id来修改页面的css

这里的global代表它是一个全局属性。

当你要修改单个页面中的css时，要加个名字把全局属性包一下，否则所有的页面都会被修改

.tableListForm {
  :global {
    .ant-form-item {
      margin-bottom: 24px;
      margin-right: 0;
      display: flex;
      > .ant-form-item-label {
        width: auto;
        line-height: 32px;
        padding-right: 8px;
      }
      .ant-form-item-control {
        line-height: 32px;
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  .submitButtons {
    white-space: nowrap;
    margin-bottom: 24px;
  }
}

以上就是两种简单强制修改页面元素属性的方法！