Replace TextField with custom input in NumberInput

components/articles-inputs/parameter/Parameter.module.scss

@@ -17,28 +17,21 @@ $input-margin: 0.3rem;
 
 .amendementInput {
   width: 80px;
-  top: -0.2rem;
-
-  input {
-    font-family: $law-font-family;
-    font-weight: bold;
-    font-size: $law-font-size;
-  }
 }
 
 .smallInput {
-  width: 40px
+  width: 40px;
 }
 
 .amendementValue {
   font-weight: bold;
   margin-left: $input-margin !important;
   margin-right: $input-margin !important;
-  color: #000000;
 }
 
 .amendementValueModified {
   padding: 0.1rem;
+  margin: -0.1rem;
   background-color: $amendement-bg-color;
 }
 

components/articles-inputs/parameter/number-input/NumberInput.module.scss

+.value {
+  font:inherit;
+  border: none;
+  background-color: inherit;
+  border-bottom: 1px solid black;
+}
+
+.value:focus {
+  outline: none;
+}
\ No newline at end of file

components/articles-inputs/parameter/number-input/NumberInput.tsx

-import TextField from "@material-ui/core/TextField";
 import { PureComponent } from "react";
 
 import { formatNumber } from "../../../utils";
+import styles from "./NumberInput.module.scss";
 
 function parseNumber(str: string): number {
   return parseFloat(
@@ -55,8 +55,8 @@ export class NumberInput extends PureComponent<Props, State> {
     const { value } = this.state;
     const { className } = this.props;
     return (
-      <TextField
-        className={className}
+      <input
+        className={`${styles.value} ${className || ""}`}
         value={value}
         onChange={this.handleChange} />
     );

styles/_variables.scss

@@ -11,4 +11,4 @@ $default-font-family: Lato;
 
 $law-font-family: Lora;
 $law-font-size: 18px;
-$law-line-height: 1.6;
+$law-line-height: 1.4;