无法删除 Material-ui TextField 边距答案

【问题标题】：Cannot remove Material-ui TextField margin无法删除 Material-ui TextField 边距
【发布时间】：2018-01-04 02:51:58
【问题描述】：

使用 styled-components 和内联样式，我无法移除 material-ui 的 TextField 组件周围的填充。有任何想法吗？但该内联宽度有效（样式组件宽度不起作用）。

例子：

代码：

const StyledSelect = styled(SelectField)`
  margin:0;
  input {
    margin:0;
  }
`;
const StyledText = styled(TextField) `
  margin:0;
  input {
    margin:0;
  }
`;
return (
  <div>
    <StyledText
      type="number"
      floatingLabelText={this.props.title}
      onChange={this.handleAmtChange}
      value={this.state.amount}
      style={{ width: '100px', margin: '0px', input: { margin: 0 } }}
      min={0}
    />
    <StyledSelect
      floatingLabelText="Unit"
      onChange={this.handleUnitChange}
      value={this.state.unit}
      style={{ width: '100px', margin: '0px' }}
    >
      <MenuItem 
        value={0} 
        primaryText={"In"} 
      />
    </StyledSelect>
  </div>
);

更新

我最初使用的是material-ui 0.X，但更新为1.0.0-beta.26。问题稍微好一点，但仍然非常明显。有什么想法吗？

【问题讨论】：

你在 SelectField 和 TextField 组件中传递了 className 吗？请参阅此处：styled-components.com/docs/basics#styling-any-components 否则，保证金将永远不会传递给您的组件。
这些组件是material-ui做的，相信是把class name属性传下来
他们实际上是这样做的：github.com/mui-org/material-ui/blob/v1-beta/src/TextField/… 但我认为问题可能是，内部组件通过“...ClassName”作为类名传递。所以我确实认为，您的样式化组件仅对 MaterialUI 的 FormComponent 进行样式设置，而不是其中的元素。这可能是原因吗？尝试使用边框填充以查看确切的影响。
什么版本的 Material-UI？
你试过<div className={"some-global-class ${this.props.className}"} />;吗？根据文档，这应该结合类styled-components.com/docs/advanced#existing-css

标签： css reactjs input material-ui styled-components

【解决方案1】：

试试这个：

对于我的特殊问题和代码，我将 style={{marginTop: '-20px'}} 添加到 TextField：

<TextField style={{marginTop: '-20px'}}/>

因此，对于您的示例，我认为您需要将 marginTop: '-20px' 添加到您的“StyledText”style={{ 部分。使用负的 marginTop 值，直到正确为止。要找出您确切需要的内容，请在 google chrome 中右键单击您感兴趣的区域，然后转到“检查”以查看它的代码。使您的负 marginTop 值足够大，以否定任何正值将其搞砸。

我第一次提到这个的地方：https://github.com/TeamWertarbyte/material-ui-chip-input/issues/91#issuecomment-394498826

【讨论】：