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;
  }
}
 

以上就是兩種簡單強制修改頁面元素屬性的方法！