在 Material-ui 包装器组件中定位和设计特定子元素的正确方法？

Question

什么是正确的/建议的方式在目标和具体风格子元素Material-ui使用包装部件makeStyles()？我们是否使用类选择器？

例如，针对我使用的 TextField 组件的输入元素 & .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>);
};

我知道在 Material-UI 中有很多样式组件的方法，这就是为什么我有点困惑哪个是哪个。所以，我只想知道定位子元素的标准方法。我在文档中看到了使用示例'& p'- 这是否意味着没有 Material-UI 特定的方式？我们只使用基本的 css 选择器？

Answer 1

我建议将InputProps一个对象传递给TextField.

就像是：

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

然后将其传递到 TextField 中：

<TextField
  InputProps={InputProps}
>