web-dev-qa-db-ja.com

マテリアルUIからのテキストボックスのパディングを削除します

テキストボックスからパディングを削除しようとしていますが、問題はマテリアルUIからのものです。

すべてのクラスにパディング0を指定しましたが、パディングはまだ削除されていません。

このパディングを削除する方法を教えてください。

.MuiOutlinedInput-input-1708 {
    padding: 18.5px 14px;
}

これが私のコードとサンドボックスです：

https://codesandbox.io/s/m58841kkwp

cssLabel: {
    "&$cssFocused": {
      color: { borderColor: "red", padding: 0 }
    }
  },
  cssFocused: { borderColor: "red", padding: 0 },
  cssUnderline: {
    "&:after": {
      borderBottomColor: "red",
      padding: 0
    }
  },
  // cssOutlinedInput: {
  //   "&$cssFocused $notchedOutline": {
  //     borderColor: "green"
  //   }
  // },

  cssOutlinedInput: {
    "& $notchedOutline": {
      //add this nested selector
      borderColor: "red",
      padding: 0
    },

    "&$cssFocused $notchedOutline": {
      borderColor: "green",
      padding: 0
    }
  },

  notchedOutline: { borderColor: "red", padding: 0 },
javascripthtmlcssreactjsmaterial-ui
4
user10509524

docs を読むと、ネイティブの入力要素に属性を適用するinputProps（InputPropsではない）プロパティが見つかります。以下に示すように、スタイル属性を渡すことができます。

<TextField
    inputProps={{
       style: {
         padding: 5
       }
    }}
/>
3
sudazzle

このサイトで答えを見つけました： https://material-ui.com/customization/overrides/

const styles = theme => ({
  noPadding: {
    padding: 0
  },
});

// some code

const { classes } = this.props;

// some code

<OutlinedInput
  labelWidth={0}
  name="timeUnit"
  id="outlined-time-unit"
  classes={{input: classes.noPadding}}
/>
1
user11191998

解決策はこの答えにあります ここにリンクの説明を入力してください

classNameをTextFieldとInputPropsに渡す

<TextField multiline={true} variant="outlined" rowsMax={10} placeholder="Notes" className={classes.formInput}
            InputProps={{ classes: { input: classes.formAreaInput } }} fullWidth onChange={this.handleNotesInput} />
0
Walker