Стилизация пользовательского интерфейса Fabri c Date Picker Callout

Question

Как я могу изменить стиль элементов внутри выноски пользовательского интерфейса Fabri c Date Picker? Например, выделите текущий месяц?

Согласно документации , я должен иметь возможность использовать свойство стилей DatePicker для целевые подкомпоненты, но я не знаю, как добраться до указанных c элементов:

styles = {
  callout: {
  ... what goes here?
  }
}

Я пытаюсь заставить это работать, не полагаясь на еще одну стороннюю библиотеку, такую ​​как styleled- компоненты.

Answer 1

Объект 'callout' (как и другие, например, icon, root, textField для компонента DatePicker) ожидает css -стилей (camelCased, no da sh).

Ссылка на 'Callout' к элементу HTML, обертывающему всплывающее окно, значок к значку в DatePicker и т. д. c.

styles = {
  callout: {
    maxHeight: '300px',
    fontSize: '2rem',
    /* etc */
  },
  icon: {
     color: 'red'
  },
  root: {},
  textField: {}
}

Изменить:

выделение текущего месяца Вы можете легко архивировать с помощью DatePicker Prop highlightCurrentMonth (из do c: «Должен ли сборщик месяцев выделять текущий месяц»)

Ссылка на DatePicker do c

Answer 2

Спасибо @Lumpenstein за помощь. Я просто публикую здесь пример, демонстрирующий использование селекторов и & :

const dpStyles: IDatePickerStyles = {
    root: { /* styles */ },
    textField: { /* styles */ },
    icon: { /* styles */ },
    callout:
      { selectors:
        { '& button': { backgroundColor: "red" }
      }
 }
};