删除来自材料 ui 的文本框的填充

Posted 2023-02-22

【中文标题】删除来自材料 ui 的文本框的填充

【英文标题】：remove padding of the textbox which comes from material ui

【发布时间】：2019-04-24 10:29:37

【问题描述】：

我正在尝试从文本框中删除填充，但问题是它来自 Material 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 ,

【问题讨论】：

你试过padding: 0!important吗？

@PabloDbSys ：我更新了但仍然无法工作codesandbox.io/s/m58841kkwp

【参考方案1】：

如果您阅读docs，您可以找到将属性应用于本机输入元素的 inputProps（不是 InputProps）属性。如下图可以传一个style属性。

<TextField
    inputProps=
       style: 
         padding: 5
       
    
/>

【讨论】：

这应该是官方的回答。谢谢@sudazzle

谢谢，这对我来说是完美且最简单的解决方案。

【参考方案2】：

解决它的一种方法是创建一个有用的类并覆盖材料文本字段的样式。这样你就可以重复使用了

我离开这个例子 https://stackblitz.com/edit/react-textfield-without-padding

注意：我给它留了一个 5px 的内边距，让它看起来更好看。你可以自定义它，这样你就没有填充

有用的资源

https://reactjs.org/docs/faq-styling.html https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

【讨论】：

谢谢它的工作...你能帮我解决这个问题吗***.com/questions/53265169/…

你能告诉我为什么你在类名中使用了这个而没有这个也可以正常工作----> $classes.textField

classes.textField 这是因为我取自这个例子material-ui.com/demos/text-fields。关于语法 $classes.textField without-padding 是一个 javascript 功能 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【参考方案3】：

解决方案在这个答案How to style MaterialUI textfield

将 className 传递给 TextField 以及 InputProps

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

【参考方案4】：

我在这个网站上找到了答案：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
/>

【讨论】：

在你的代码中.. 使用 inputProps= style: padding: 0 ,........不是 InputPros