Reputation: 1
I've got a big React app, which is now using Material UI 4.3.0.
I was trying to remove the margin-top
style of label + .MuiInput-formControl
. (It is a select
mui component)
I used the 'overrides' tag in my App.js, as I have before, doing
const theme = createMuiTheme({
overrides: {
MuiInput: {
formControl: {
"label + &": {
marginTop: "0",
}
}
}
},
...
}
And it worked just fine... but it broke every other time I used the same component, as expected. In my current, working file where I want to change margin, I'm having a hard time overriding the default styles. What is the correct way to override it?
I've tried overriding with classes, unsuccessfully, tried to do const styles = theme => ({ overrides.... etc
as i wrote on the createmuitheme above, and tried with inline style.
I know there is a correct way to do it, but i'm not experienced enough to find it. An incorrect, but working way to do it, was to wrap the component in a div and using negative margins on it, but i'm looking to correct it the right way, as it is going to be useful later on too.
Thanks!
Edit: Component that i'm trying to style
renderFormats(){
const { formats } = this.state;
var 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;
}
Upvotes: 0
Views: 939
Reputation: 81126
If you are using TextField
, then you need to specify the formControl
class via InputProps
. If you are using the lower-level components (FormControl
, InputLabel
, and Select
) explicitly, then you need a custom Input
component (called InputNoMargin
in my example) with the formControl
class specified and then specify that component using the input
property of Select
.
Below is an example which applies this styling to a text input TextField
, a select TextField
, and a "composed" Select
using the lower-level components.
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles({
formControl: {
"label + &": {
marginTop: 0
}
}
});
const currencies = [
{
value: "USD",
label: "$"
},
{
value: "EUR",
label: "€"
},
{
value: "BTC",
label: "฿"
},
{
value: "JPY",
label: "¥"
}
];
const InputNoMargin = props => {
const inputClasses = useStyles(props);
return <Input {...props} classes={inputClasses} />;
};
export default function TextFields() {
const inputClasses = useStyles();
const [values, setValues] = React.useState({
name: "Cat in the Hat",
currency: "EUR"
});
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};
return (
<form>
<TextField
id="standard-name"
label="Name"
value={values.name}
InputProps={{ classes: inputClasses }}
onChange={handleChange("name")}
margin="normal"
/>
<br />
<TextField
id="standard-select-currency"
select
label="Select"
value={values.currency}
onChange={handleChange("currency")}
InputProps={{ classes: inputClasses }}
helperText="Please select your currency"
margin="normal"
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
<br />
<FormControl>
<InputLabel htmlFor="composed-select">Composed Select</InputLabel>
<Select
value={values.currency}
onChange={handleChange("currency")}
inputProps={{ id: "composed-select", name: "composed-select" }}
input={<InputNoMargin />}
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</FormControl>
</form>
);
}
Upvotes: 1