Currently, I have a large React application that is utilizing Material UI 4.3.0.
I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js file, similar to how I had done it previously:
const theme = createMuiTheme({
overrides: {
MuiInput: {
formControl: {
"label + &": {
marginTop: "0",
}
}
}
},
...
}
This approach worked as expected, but it caused issues with every other instance of the same component. Now, I am struggling to properly override the default styles in my current working file where I intend to make the margin change. What would be the correct method to achieve this?
I've attempted overriding with classes without success, tried using
const styles = theme => ({ overrides.... etcI understand there must be a proper way to handle this situation, but my lack of experience has me stumped. One workaround that worked, albeit incorrectly, was wrapping the component in a div and applying negative margins, yet I am keen on resolving this correctly for future use as well.
Thank you!
Edit: Here is the component I am attempting to style
renderFormats(){
const { formats } = this.state;
let formatsDOM = undefined;
if(formats !== undefined && this.state.selectedFormat !== undefined){
formatsDOM =
<Select
value={this.state.selectedFormat}
onChange={this.onExportChange.bind(this)}
disabled={!this.state.customFormatIsSelected}
inputProps={{
name: 'Format',
id: 'FormatInput',
}}
>
{formats.map( format => this.renderFormatEntry(format))}
</Select>
}
return formatsDOM;
}