The styles from style-component do affect the appearance of the TextField. However, it's important to note that the MUI TextField is structured with a root div containing multiple child divs, not all of which have borders. Therefore, applying the border-radius property to the root container may not visibly change the TextField's border.
<div> <!--Root container, with border:0 rule on it.-->
<div> ... </div> <!--The 'Zip Code' Label-->
<div> ... </div> <!--Input field container, border is implemented on this.-->
</div>
However, by using InputProps, the styles are actually applied to the Input field container where the border is defined in the MUI component.
In general, it's recommended to utilize the customizable props provided by MUI for styling, as they offer greater flexibility in modifying CSS properties.
It's worth mentioning that setting sx={{ width: '15rem' }} also affects the width of the root container, demonstrating that styles defined in styled-component can indeed take effect. If these styles do not appear as expected, it's possible that other CSS rules are conflicting, but utilizing MUI props is still the preferred approach.