Material-ui-pickers: How to change the styling?

[amanshu-kataria]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | ^1.0.0-rc.7 |
| material-ui | ^1.0.0-beta.44 |
| React | ^16.2.0 |
| Browser | Chrome 66.0.3359.139 |
| Platform | Mac |

How to change the styling of input and DatePicker dialog?
I want to change the following styles:

• Input
  
  
  
  • Underline Style
  
  
  • Text Field Style
  
  
  • Hint Style
  
  
• Date Picker
  
  
  
  • Select Color
  
  
  • Header Color
  
  
  • Flat Button
    
    
    
    
    
    • Primary Text Color
    
    
    
  
  
  • Current Date Color
  
  
  • Selected Year Color
  
  

[dmtrKovalenko]

Check appropriate documentation section. For text field styling use ‘classes’ property as for default material hi TextField component.

[nickisaacs]

@dmtrKovalenko
I'm unable to style the textfield. Tried applying these styles: https://material-ui.com/demos/text-fields/, but it does not work. How do I apply this "classes" property?

I've tried these:

input: {
            color: '#333333',
            cssUnderline: {
                '&:after': {
                    borderBottomColor: '#333333',
                },
            },
            cssLabel: {
                '&$cssFocused': {
                    color: '#333333',
                },
            },
        },

and

cssUnderline: {
            '&:after': {
                borderBottomColor: '#333333',
            },
        },

[lmahapatra-oliver-it]

I have the same problem now. Any luck @nickisaacs ?

[nickisaacs]

@lmahapatra-oliver-it
What I ended up doing was overriding the primary and secondary colors and then passing it to the MUIThemeProvider.

import { createMuiTheme } from '@material-ui/core'


export const customTheme = createMuiTheme({
    palette: {
        primary: {
            main: 'YOUR COLOR',
            light:  'YOUR COLOR',
            dark: ' 'YOUR COLOR',
        },
        secondary: {
            main: 'YOUR COLOR',
        },
    },
})

<MuiThemeProvider theme={customTheme}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <DatePicker
                        ...
                    />
                </MuiPickersUtilsProvider>
</MuiThemeProvider>

[Wgil]

If any of you are still interested on this:

import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";
import React from "react";
import MuiPickersUtilsProvider from "material-ui-pickers/utils/MuiPickersUtilsProvider";
import DatePicker from "material-ui-pickers/DatePicker";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  input: {
    color: "red"
  }
});

const Calendar = ({ classes, ...rest }) => (
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <DatePicker
      {...rest}
      leftArrowIcon={<KeyboardArrowLeft />}
      rightArrowIcon={<KeyboardArrowRight />}
      InputProps={{ className: classes.input }}
    />
  </MuiPickersUtilsProvider>
);

Calendar.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Calendar);

[Falkyouall]

i solved it via the InputProps key, took me a while till i found this part of the doc, saying:

Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.

so i can override any style of the component like this:

<KeyboardTimePicker ampm={!de} variant="inline" InputProps={{ classes: { root: classes.maxWidth } }} classes={{ root: classes.maxWidth }} name={'timeend'} format="HH:mm" value={value} onChange={this.handleTimeWindowEndRefactor} />

where
inputProps.root = MuiInput-root , which is the one i couldn't style properly before...

[Reshad-A]

There is no solution as of yet. However there is a workaround to pass a css class name to popup/dialog container. Pass an img tag for rightArrowIcon props of datepicker with onload function to call its parent and inject css class.

<DatePicker
   disableToolbar={true}
   variant="inline"  
   inputVariant="outlined"  
   rightArrowIcon={<img src="/images/chevron-right_1.svg" id="datepicker-arrow-right" onLoad={injectTheme}/>}   
leftArrowIcon={<img src="/images/chevron-right_1.svg" style={{transform:"rotate(180deg)"}}/>} 
....
....
....
/>

const injectTheme=()=>{
let node = document.getElementById("datepicker-arrow-right").parentNode.parentNode.parentNode.parentNode.parentNode.parentElement;
    node.classList.add("Css-Class-Name"); 
}

[dmtrKovalenko]

For arrow icons you can pass css right to rightArrowIconProps={{ className: classes.smth }}} for mostly everything else use theme overrides. At least for now. We might introduce something in v4

[valentinbourqui]

@Wgil thx I could die in peace now thx. Why InputProps isn't mentioned inside API documentation ?

Cloud be good to add that

[jbrennan414]

I've been able to do this a little differently, I leaned into the inspector to get class names, etc :

const customTheme = createMuiTheme({
    overrides: {
        MuiPickersBasePicker:{
            pickerView:{
                backgroundColor:"black"
            }
        },
        MuiPickersDay: {
            day: {
                color: "light-gray",
                fontFamily: "\"Do Hyeon\", sans-serif",
                backgroundColor: "white",
                borderRadius:"0px",
            },
            container:{
                backgroundColor:"black"
            },
            daySelected: {
                backgroundColor: "",
                color:"light-gray"
            },
            dayDisabled: {
                color: "black",
            },
            current: {
                color: "",
            },
        },
    },
});

[tkatariya]

I cannot see MuiPickersDay as a override in createMuiTheme

[oliviertassinari]

@tkatariya See #1794.

[mrboli]

If you want to control the input, follow the standard input guidelines here "Customized Inputs":
https://material-ui.com/components/text-fields/#customized-inputs

Then in your theme provider / creator use this:

const myTheme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        border: '1px solid red'
        // .. other styling that you want
      }
    }
  }
})

Obviously you have to have the correct imports, and you need to feed this into the theme provider.

[YoniH]

I needed to change the visibility of a day in DatePicker, so I used the renderDay prop of DatePicker:

const getDayComponent = (day: Date, selectedDate: Date, dayComponent: JSX.Element) => {
    return React.cloneElement(
        dayComponent,
        {style: { ... }},
    );
};

<DatePicker
    ...
    renderDay={(
        day: MaterialUiPickersDate,
        selectedDate: MaterialUiPickersDate,
        dayInCurrentMonth: boolean,
        dayComponent: JSX.Element,
    ) => getDayComponent(day, selectedDate, dayComponent)}
    ...
/>

[JavaJamie]

To change the dialog styling you can do this...

const useStyles = makeStyles((theme: Theme) => createStyles({
    datePicker: {
        '& .MuiPickersModal-dialog': {
            backgroundColor: 'red !important'
        }
    }
}));

const { datePicker } = useStyles();

<DatePicker DialogProps={{ className: datePicker }} />

[H3RSKO]

It seems the difficult part is finding the exact Mui component to override. You really need to find the exact Mui component that is generating the color, and then override that specific component.

In my case I had a signup form (similar to this: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-up/SignUp.js) where all the component text and borders were showing as black against a very dark background when not selected.

After some trial and error I was able to change all the colors in the form with this:

const myTheme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        color: 'myColor',
      },
    },
    MuiFormLabel: {
      root: {
        color: 'myColor',
      },
    },
    MuiOutlinedInput: {
      notchedOutline: {
        borderColor: 'myColor'
      },
})

[nandorojo]

I ended up using inputProps.style. Don't really recommend it though, theming is probably better for the modal.

I'll leave mine here FWIW.

import {
  MuiPickersUtilsProvider,
  DatePicker,
} from '@material-ui/pickers'
import DateFnsUtils from '@date-io/date-fns'

import { useDripsyTheme } from 'dripsy'

export default function Picker(props) {
  const {
    colors,
    fonts,
    radii,
    borderWidths,
    fontSizes,
    space,
  } = useDripsyTheme().theme
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        {...props}
        inputProps={{
          style: {
            color: colors.text,
            borderColor: colors.muted5,
            fontFamily: fonts.root,
            borderStyle: 'solid',
            borderWidth: borderWidths[1],
            borderRadius: radii[3],
            outline: 'none',
            fontSize: fontSizes[3],
            padding: `${space[2]}px`,
          },
        }}
      />
    </MuiPickersUtilsProvider>
  )
}

[oliviertassinari]

@nandorojo Mind that in v4, we have changed the API to be declarative, following the model of the Autocomplete, see https://next.material-ui-pickers.dev/demo/datepicker.