Topic: Properly updating MDBDatePIcker CSS Styles
Hello,
My question is fairly simple. What is the proper way to update the color scheme of the MDBDatePicker Component in React? The documentation does not contain any pointers for this. The component generates its own classes that are slightly changed each time they render. How do I properly target the modal that pops up when the datepicker is selected in order to change the style of the component to meet specific needs?
Below is my code and a link to current docs.
Docs
Thanks,
<MDBDatePicker style={{ width: '100%', color: '#0e9aa7' }} value={this.props.dashboard.ops.apiDate}
getValue={this.getValue} id='Opscalendar' format='DD MMMM, YYYY'
/>
Add comment
Hi there,
Because DatePicker is pretty to complex and we are currently working on rebuild, it is not mentioned in docuemntation, that you con use
theme prop to add your custm styles.
Here is a little snippet for you:
import React from 'react';
import { MDBDatePicker, Container } from 'mdbreact';
const theme = {
overrides: {
MuiPickersToolbar: {
toolbar: {
backgroundColor: 'black',
},
},
MuiPickersCalendarHeader: {
switchHeader: {
// backgroundColor: 'blue',
// color: 'blue',
},
},
MuiPickersDay: {
day: {
color: 'green',
},
selected: {
backgroundColor: 'blue',
},
current: {
color: 'blue',
},
},
MuiPickersModal: {
dialogAction: {
color: 'blue',
},
},
},
}
class DatePickerPage extends React.Component {
getPickerValue = (value) => {
console.log(value);
}
render() {
return(
<Container className="mt-5">
<MDBDatePicker getValue={this.getPickerValue} theme={theme} />
</Container>
);
}
};
export default DatePickerPage;
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: React
- MDB Version: 4.7.1
- Device: All
- Browser: Major
- OS: Mac
- Provided sample code: No
- Provided link: Yes
Tags
Related topics