How to add cursor pointer and other css to material ui datepicker

Question

My Material UI datepicker component in React is not showing the cursor and also the icon I added is not clickable and does not show the datepicker dialog.

I've tried inline styling/styled-components but couldn't do it.

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

What happens is that whatever within the black border of the component is clickable but does not show mouse pointer. Also the icon I put inside it is not clickable and does not make the dialog to appear.

Answer 1

this worked for me

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

you dont have to use the styled components you can just pass a style property with similar css rules.