Changing the background color of selected date and outline color of the current date

[shubhamdeodia]

Hi,

It's a very useful component, thank you for making it.

I was wondering if there is a way to change the background colour of the selected date and outline colour of the current date just using wrapperClassName or through some colour props?

I am using it in a non-mui project, so I can't really use mui-styles with it.

If there is no other way, Is it possible to consider adding colour props?

[JWLangford]

@shubhamdeodia I second the styling need. I found a way to do it in css

button[class^="materialui-daterange-picker-makeStyles-filled"], button[class*=" materialui-daterange-picker-makeStyles-filled"] { background-color: aquamarine !important; }

This will style the selected date button to be whatever you want. You should be able to target whatever other piece you need.

[dadvir]

@JWLangford - you are right. Having said that, the performance of the web page will degrade if you have too many of those selectors. I assume styling functionality would be easier for the engineer to implement and the user with faster web page.

[yeabsira-gashaw]

Hi, I used the following code to style the date range picker by using @JWLangford code's as a reference

.MuiTypography-colorTextSecondary {
  color: #A0ACC3 !important;
}
.MuiTypography-colorTextPrimary {
  color : #144183 !important
}
button[class*="materialui-daterange-picker-makeStyles-filled"] .MuiTypography-colorTextPrimary{
  color : white !important;
} 

div[class*="materialui-daterange-picker-MuiSelect-select"] ,div[class*="materialui-daterange-picker-MuiSelect-selectMenu"] {
  color : #144183 !important;
}

[PavelJiranek]

Hi, this can be used to style just the buttons color:

    'button[class*="materialui-daterange-picker-makeStyles-outlined"]': { // today
      borderColor: '#000',
    },
    'button[class*="materialui-daterange-picker-makeStyles-filled"]': { // selected date
      backgroundColor: '#000',
    },

Anyway, it would be great if the primary color was configurable via props.

[PavelJiranek]

Hi, this can be used to style just the buttons color:

    'button[class*="materialui-daterange-picker-makeStyles-outlined"]': { // today
      borderColor: '#000',
    },
    'button[class*="materialui-daterange-picker-makeStyles-filled"]': { // selected date
      backgroundColor: '#000',
    },

Anyway, it would be great if the primary color was configurable via props.

[bugger279]

Few more updates if someone wants to take inspiration from

div[class^="materialui-daterange-picker-makeStyles-highlighted"],
div[class*=" materialui-daterange-picker-makeStyles-highlighted"] {
  background: #EAEFF5 !important;
}

button[class^="materialui-daterange-picker-makeStyles-filled"],
button[class*=" materialui-daterange-picker-makeStyles-filled"] {
  background-color: #006DFF !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-size: 10px !important;
}

button[class^="materialui-daterange-picker-makeStyles-outlined"],
button[class*=" materialui-daterange-picker-makeStyles-outlined"] {
  border-radius: 2px !important;
  font-size: 10px !important;
  color: #141414 !important;
  border: 1px solid #006DFF !important;
}