How to apply custom styling on TextField in Office UI Fabric React so that the TextField component fits the dimensions of the table cell

Question

I'm working on SPFX webpart on prem using React 15.6.2, Office UI Fabric React v5.135.6. I don't have access to the ITextFieldStyles library. I want to make the height of the TextField component to fit in accordance to the td dimensions. The approach method that I would prefer is to set the height and width component of the TextField root component to 100%.

Here's the React tsx code

<td className= { styles.sukukRemarksCol }>
  <TextField
    className= { styles.textField }
    multiline= { true }
    resizable= { false }
    borderless= { true }
    autoAdjustHeight= { false }
    value= { this.state.listingRequirementsRemarks }
    onBlur= {() => this.getListingRequirementsRemarks}
    style={
      {
        padding: "1%",
      }
    }
  >
  </TextField>
</td>

SCSS code

:global {
  .ms-TextField.root_cd8a9909.ms-TextField--multiline.rootIsMultiline_cd8a9909.ms-TextField--borderless.rootIsBorderless_cd8a9909 {
    height: 100% !important;
    width: 100% !important;
  }
}
.sukukRemarksCol {
  border-collapse: collapse;
  height: inherit;
  width: 100%;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 0;
  text-align: center;
  position: relative;
}

.textField {
  min-height: max-content;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 2%;
}

I tried with the current approach shown above but apparently it doesn't seem to work, may I know what went wrong?