Having trouble removing the padding around material-ui's TextField component when using styled-components and inline styling. Any solutions to this issue? Interestingly, the inline width property is functioning correctly, unlike the styled-component width.
See example below:
https://i.sstatic.net/n58J0.png
Snippet of the code:
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>
);
Update
Previously using material-ui version 0.X, I upgraded to 1.0.0-beta.26. The problem has slightly improved but is still quite noticeable. Open to suggestions on how to resolve this issue.