无法删除 Material-ui TextField 边距

Question

使用样式组件和内联样式，我无法删除材质 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. 问题好一点了，但仍然非常明显。有任何想法吗？

Answer 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