Как настроить DateTimePicker из Material-UI - PullRequest
Новая
       12

Как настроить DateTimePicker из Material-UI

0 голосов
/ 08 марта 2020

Я пытаюсь настроить DateTimePicker из Material-UI. Вот его документация: https://material-ui-pickers.dev/api/DateTimePicker

Раздела для стиля нет. Я хочу изменить основной цвет для всех цветных компонентов. До сих пор я пробовал использовать общую документацию theme и пытаться изменить стиль темы: 

const theme = createMuiTheme({
  status: {
    danger: '#FF72B1',
  },
  dateTimePicker: {
    headerColor: '#FF72B1',
    selectColor: '#FF72B1',
  },
  datePicker: {
    selectColor: '#FF72B1',
    headerColor: '#FF72B1'
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  )
}

Насколько я понял из документации theme, единственное, что До сих пор я определял переменные со стилями, но они не будут применяться. Я должен указать их в точном компоненте, и здесь начинается сложная часть.

В моем Material-UI DateTimePicker: 

function MaterialDateTimePicker() {
  const classes = useStyles()
  return (
    <Fragment>
      <DateTimePicker
        label={label}
        inputVariant="outlined"
        value={value}
        onChange={onChange}
        classes={{
          root: classes.root,
          checked: classes.checked,
        }}
      />
    </Fragment>
  );
}

Я попытался применить стиль: 

const useStyles = makeStyles(theme => ({
  root: {
    color: '#FF72B1',
    backgroundColor: 'orange',
    '& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
      backgroundColor: 'green'
    }
  },
  checked: {},
}));

Вот как я пытался стилизовать компоненты с этой библиотекой, основываясь на исследованиях, чтении документа и некоторых ответах SO:

Как изменить пользовательский интерфейс материала, выбрать границу и label

Таким образом, в основном вам необходимо go к документации, попытаться найти класс .XXX, соответствующий компоненту, который вы хотите настроить, и, если документация отсутствует, вы должны go в DOM, и начните искать этот класс.

Я сделал это, но у меня есть пара вопросов:

1) В моем конкретном случае у меня есть проблема, которая на моем DateTimePicker Я применяю классы root, которые находятся на уровне компонента input. Всплывающий календарь не является дочерним элементом этого компонента, он открыт javascript, поэтому я не знаю, как получить к нему доступ.

Этот синтаксис больше не работает: 

root: {
    color: '#FF72B1',
    backgroundColor: 'orange',
    '& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
      backgroundColor: 'green'
    }
  },

Поскольку root является вводом, а не всплывающим календарем.

2) Это действительно способ go с этой библиотекой? Потому что все ответы на СО и go жалуется на это направление. Кто-нибудь знает другую стратегию?

3) В папке @material-ui/pickers node_modules я не смог найти файл css. Я хотел бы выбрать его и настроить там, как это возможно для react-dates library et c. Это возможно? Где стили css?

Я приготовил песочницу с тем, что попробовал:

https://codesandbox.io/s/inspiring-napier-zh4os

(К сожалению, библиотека утилит установлена, но не работает, локально на моем компьютере программа выбора работает нормально, я просто не могу ее стилизовать)

1 Ответ

0 голосов
/ 08 марта 2020

Я думаю, вам просто нужно отменить внешний вид webkit. Есть несколько способов отменить определенные c стили webkit (так что вы можете добавить свой собственный). Попробуйте выполнить следующее: 

-webkit-appearance: none;

ReactJS встроенные стили: webkitAppearance: "none";

Также ознакомьтесь с другими функциями -webkit- [] ... Существуют функции для более подробной информации c такие элементы, как границы, цвета и т. д. c ...

Надеюсь, это поможет :)

...