如何将光标指针和其他css添加到材质ui datepicker答案

【问题标题】：How to add cursor pointer and other css to material ui datepicker如何将光标指针和其他css添加到材质ui datepicker
【发布时间】：2019-05-21 18:26:11
【问题描述】：

我在 React 中的 Material UI 日期选择器组件没有显示光标，而且我添加的图标不可点击，也没有显示日期选择器对话框。

我尝试过内联样式/样式组件，但做不到。

<MuiThemeProvider muiTheme={muiTheme}>
    <MuiPickersUtilsProvider utils={MomentUtils}>
        <DatePicker
            readOnly
            ref='datepicker'
            labelFunc={this.formatWeekSelectLabel}
            // value=""
            onChange={this.handleDateChange}
            animateYearScrolling
            InputProps={{
                disableUnderline: true,
            }}      
        />
    </MuiPickersUtilsProvider>
</MuiThemeProvider>

发生的情况是组件黑色边框内的任何内容都是可点击的，但不显示鼠标指针。此外，我放入其中的图标不可点击，也不会使对话框出现。

【问题讨论】：

您使用的是哪个版本的 material-ui 和 material-ui 选择器？我在任何当前版本中都找不到 readOnly 道具，但如果它在您正在使用的版本中实现并为您的组件提供只读机制，也许这就是您无法与之交互的原因（即没有光标和没有按钮交互）？
“material-ui-icons”：“^1.0.0-beta.36”，“material-ui-pickers”：“^2.2.4”，没有。 readOnly 没有影响，也不是根本问题

标签： reactjs material-ui

【解决方案1】：

这对我有用

const StyledKeyboardDatePicker = styled(KeyboardDatePicker)`
    & * {
        cursor: pointer;
    }
`;

您不必使用样式组件，您只需传递具有类似 css 规则的样式属性即可。

【讨论】：