Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to change the styling? #393

Closed
amanshu-kataria opened this issue May 8, 2018 · 18 comments
Closed

How to change the styling? #393

amanshu-kataria opened this issue May 8, 2018 · 18 comments

Comments

@amanshu-kataria
Copy link

amanshu-kataria commented May 8, 2018

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
Copy link
Member

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

@nickisaacs
Copy link

nickisaacs commented Jul 13, 2018

@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
Copy link

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

@nickisaacs
Copy link

nickisaacs commented Aug 30, 2018

@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
Copy link

Wgil commented Oct 5, 2018

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
Copy link

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
Copy link

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
Copy link
Member

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
Copy link

valentinbourqui commented Jan 7, 2020

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

Cloud be good to add that

@jbrennan414
Copy link

jbrennan414 commented Feb 27, 2020

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
Copy link

I cannot see MuiPickersDay as a override in createMuiTheme

@oliviertassinari
Copy link
Member

@tkatariya See #1794.

@mrboli
Copy link

mrboli commented Jun 23, 2020

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
Copy link

YoniH commented Aug 19, 2020

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)}
    ...
/>

@j-lee8
Copy link

j-lee8 commented Oct 23, 2020

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
Copy link

H3RSKO commented Oct 29, 2020

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
Copy link

nandorojo commented Nov 3, 2020

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
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests