Как настроить интерфейс материалов в React?

Question

Я очень новичок в использовании этой инфраструктуры пользовательского интерфейса вместе с React.Мне было поручено разработать приложение, которое должно иметь больше шаблонов проектирования, и я выбрал среду, которая также не использует код Jquery.Однако я изо всех сил пытаюсь настроить готовые компоненты.У них есть раздел переопределения на их веб-сайте, но я не очень хорошо это понял.

Я знаю, что есть 2 способа настройки элемента

1. Вы можете создать const styles = theme => { styles here }.Затем вы вызываете компонент более высокого порядка с именем withStyles.тогда определенные свойства css будут доступны на classes prop.
2. Вы также можете использовать свойство classes для изменения внутренних компонентов, например: <Drawer classes={x}>.

Второй - тот, который я не совсем понимаю, как он работает.Например, у них есть компонент.Но изменить его фон для меня было очень сложно, мне пришлось изменить его вручную в моем собственном файле .css.Я не мог использовать className и даже использовать свойство classes, оно не работало.

Может кто-нибудь объяснить мне немного лучше, как именно выполняется настройка?

Answer 1

Фон и другие цвета, которые вы можете изменить, обновляют тему .Таким образом, вы можете настроить основной / дополнительный фон и цвета текста, а также использовать их в своих стилях.

Что касается пользовательского оформления отдельных компонентов;Идея состоит в том, чтобы использовать withStyles в качестве компонента высшего порядка, оборачивая ваши компоненты.Он принимает theme в качестве параметра и передает classes в качестве реквизита для обернутого компонента.

Пример:

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

const styles = theme => ({
  someClass: {
    padding: theme.spacing.unit * 5
  },
  otherClass: {
    background: 'red'
  }
});

Как только стили определены, вы можете использовать их в своем компоненте, напримертак:

const MyComponent = (props) => {
  return (<Button className={props.classes.someClass}>Some Action</Button>)
}

export default withStyles(styles)(MyComponent);

withStyles пропустит styles в подпорках как classes, и вы сможете использовать их.Если вы используете функциональные компоненты, вы можете получить к ним доступ через props.classes, если вы расширяете Component, они будут в this.props.classes

Если вы хотите использовать несколько классов, вынеобходимо установить зависимость classnames и импортировать ее:

import React from 'react';
import { withStyles } from '@material-ui/core/styles/withStyles';
import classNames from 'classnames';


const styles = theme => ({
  someClass: {
    padding: theme.spacing.unit * 5
  },
  otherClass: {
    background: 'red'
  }
});

const MyComponent = (props) => {
  return (<Button className={classNames(props.classes.someClass, props.classes.otherClass)}>Some Action</Button>)
}

export default withStyles(styles)(MyComponent);

Свойство classes также можно использовать для установки нескольких классов, но это зависит от API-интерфейса стилей компонента Material-UI.Например, для Tab компонент

<Tab label="Hello" classes={ { root: classes.tab, selected: classes.tabSelected }} />

принимает root в качестве стилей, которые будут применяться по умолчанию, и selected будет применяться при выборе вкладки.В этом случае styles будет содержать:

const styles = theme => ({
  tab: {
    minWidth: 'auto',
    fontSize: '11px',
    fontWeight: 'bold'
  },
  tabSelected: {
    background: theme.palette.background.paper,
    color: theme.palette.secondary.main
  },
};

Обратите внимание, что они используют CSS API Tab для отображения пользовательских стилей с предопределенными именами классов.

И, конечно, Компонент с Tab должен быть заключен в withStyles(styles)(Component).

Вот живой пример с настроенной темой и настраиваемыми кнопками для нескольких классов.