设置 UI Fabric 日期选择器标注的样式

Question

如何修改 UI Fabric 日期选择器标注内的元素样式？例如突出显示当前月份？

根据 the documentation，我应该可以使用 DatePicker 样式属性来定位子组件，但我不知道如何到达特定元素：

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

我正在努力让它工作，而不必依赖另一个第三方库，如 styled-components。

Answer 1

'callout' 对象（与其他对象一样，例如 DatePicker 组件的图标、根、文本字段）需要 css 样式（驼峰式，无破折号）。

'Callout'指的是HTML-元素包装弹出窗口，Icon到DatePicker中的Icon等

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

编辑：

突出显示当前月份，您可以通过 DatePicker Prop highlightCurrentMonth（来自文档：'Whether the month picker should highlight the current month'）轻松存档

Link to DatePicker doc

Answer 2

感谢@Lumpenstein 提供的所有帮助。我只是在这里发布一个示例来展示 选择器 和 & 符号的使用：

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

设置 UI Fabric 日期选择器标注的样式

Styling the UI Fabric Date Picker Callout

css

reactjs

office-ui-fabric