CODEWITHSUNDEEP
reactjsmaterial-ui
Eva Cohen
Eva Cohen

Reputation: 505

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

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.

Upvotes: 3

Views: 4022

Answers (1)

Ivan Yulin
Ivan Yulin

Reputation: 1046

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.

Upvotes: 3

Related Questions