CODEWITHSUNDEEP
reactjsdatepickermaterial-uistyling
Prefijo Sustantivo
Prefijo Sustantivo

Reputation: 525

react KeyboardDatePicker styling without theme

I have a KeyboardDatePicker with a custom style:

import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';

const datePickerTheme= outerTheme => ({
    overrides: {
    MuiFormControl: {
        marginDense: {
            marginTop:"0px"
        }
    },
    MuiInputAdornment: {
        positionEnd: {
            marginLeft: "0px"               
        }
    }
    }
});   

<ThemeProvider theme={datePickerTheme(originalTheme)}>
    <MuiPickersUtilsProvider utils={DateFnsUtils} >     
        <KeyboardDatePicker
        variant="inline"
        format="dd/MM/yyyy"             
        margin='dense'/>
    </MuiPickersUtilsProvider>
</ThemeProvider>

It works well, but I'm trying to reproduce the same customization without having to nest the picker inside a theme. I've tried using the InputProps property:

<KeyboardDatePicker
variant="inline"
format="dd/MM/yyyy"
margin='dense'
InputProps={{classes: { 
    MuiFormControl: {
        marginDense: {      
            marginTop: '0px'                            
        }                       
    },
    MuiInputAdornment: {
        positionEnd: {
            marginLeft: "0px"               
        }
    }
}
}}/>

But that does not work.

Is it possible to achieve the customization via classes,inputProps or any other method without resorting to theming or global rules?

Upvotes: 2

Views: 550

Answers (1)

Raphael Chaula
Raphael Chaula

Reputation: 328

Yes, there is a way Just add className props to it and load it with css styles from classes, it works just fine.

DatePicker

 <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale={"sw"} >
          <KeyboardDatePicker
            minDate={minDate}
            maxDate={maxDate}
            className={classes.input}
            variant="dialog"
            format="L"
            clearable
            maxDateMessage=""
            views={["year", "month", "date"]}
            placeholder="dd/MM/yyyy"
            invalidDateMessage=""
            mask="__/__/____"
            value={ val }
            onChange={(date) => {}}
            KeyboardButtonProps={{
              style: {marginLeft: -24}
            }}
            InputProps={{
              disableUnderline: true
            }}
          />
 </MuiPickersUtilsProvider>

useStyles

const useStyles = makeStyles( theme => ({
  input: {
    height: 36,
    width: 240,
    textAlign: 'right',
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
    backgroundColor: theme.palette.common.white,
  },
}));

Upvotes: 2

Related Questions