Правильный способ нацеливания и стилизации определенных дочерних элементов в компонентах оболочки Material-ui? - PullRequest
Новая
       5

Правильный способ нацеливания и стилизации определенных дочерних элементов в компонентах оболочки Material-ui?

0 голосов
/ 29 июня 2019

Каков правильный / предлагаемый способ нацеливания и стилизации определенных дочерних элементов в 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>);
};

Я знаю, что существует множество методов для стилизации компонентов в материале.-II, поэтому я немного запутался, который есть что.Итак, я просто хочу знать стандартный способ нацеливания на дочерние элементы.Я видел примеры в документах, использующих '& p' - означает ли это, что не существует конкретного способа для материала-интерфейса?Мы просто используем основные селекторы CSS?

1 Ответ

0 голосов
/ 29 июня 2019

Я бы предложил передать InputProps с объектом в TextField.

Что-то вроде: 

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

Затем передайте его в TextField: 

<TextField
  InputProps={InputProps}
>
...