Correct way to target and style specific child elements in Material-ui wrapper components?

Question

What is the correct/suggested way to target and style specific child elements in Material-ui wrapper components using makeStyles()? Do we use the class selectors?

e.g. Targeting the input element of a TextField component I use & .MuiInput-input

import { makeStyles} from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  foo: {
    '& .MuiInput-input': {
      backgroundColor: 'red'
    }
  }
});

export default function () {
  const classes = usePageStyles();

  return (<div>
    <TextField
      id="search"
      label="Search"
      placeholder="Search"
      className={classes.x}
    />
  </div>);
};

I know that there are a lot of methods to style components in Material-UI, which is why I am a bit confused which is which. So, I just want to know the standard way to target the child elements. I saw examples in the docs using '& p' - does that mean that there is no Material-UI specific way? We just use basic css selectors?

Answer 1

I'd suggest passing in InputProps with an object to the TextField.

Something like:

const InputProps = {
  className: classes.input,
  color: 'primary'
}

Then pass it into TextField:

<TextField
  InputProps={InputProps}
>