Thomas Shaw
Thomas Shaw

Reputation: 1

Override single css style / tag

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

Answers (1)

Ryan Cogswell
Ryan Cogswell

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>
  );
}

Edit TextField and Select Input classes

Upvotes: 1

Related Questions