change the theme of material ui without injecting new theme in the theme object

changeTheme.jsx

import React, { Component } from "react";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import PropTypes from "prop-types";
import moment from "moment";
import { withStyles } from "@material-ui/core/styles";
import { DateRangePicker } from "react-dates";
import FontAwesome from "react-fontawesome";
import DefaultTheme from "react-dates/lib/theme/DefaultTheme";

const styles = theme => ({
  ...DefaultTheme,
  color: {
    ...DefaultTheme.color,
    highlighted: {
      backgroundColor: "#000",
      backgroundColor_active: "#000",
      backgroundColor_hover: "#000",
      color: "#000",
      color_active: "#186A3B",
      color_hover: "#186A3B"
    }
  }
});

class DateRange extends Component {
  state = {
    startDate: moment(this.props.startDate),
    endDate: moment(this.props.endDate),
    focusedInput: null
  };

  // is out of range of 30 days
  isOutsideRange(day) {
    if (this.state.focusedInput === "endDate") {
      return (
        moment(day).isBefore(moment(this.state.startDate)) ||
        moment(day).isAfter(
          moment(this.state.startDate)
            .clone()
            .add(30, "days")
        )
      );
    }

    return false;
  }

  handlePeriodChange = (startDate, endDate) => {
    this.setState({ startDate, endDate });

    if (endDate && startDate) {
      if (endDate.diff(startDate, "days") < 31) {
        this.props.UpdateStartEndDate(
          startDate.format("YYYY-MM-DD"),
          endDate.format("YYYY-MM-DD")
        );
        this.props.LoadingChartAnalytics({
          analyticsId: this.props.analyticsId,
          platform: this.props.selectedPlatform,
          startDate: startDate.format("YYYY-MM-DD"),
          endDate: endDate.format("YYYY-MM-DD"),
          chartType: "daily"
        });
      }
    }
  };

  isEmpty = value =>
    value === null ||
    value === undefined ||
    value === "undefined" ||
    value.length === 0 ||
    value === {};

  render() {
    return (
      <DateRangePicker
        customInputIcon={<FontAwesome name="calendar" />}
        customArrowIcon={
          <FontAwesome
            style={{
              marginRight: "50px",
              textAlign: "left",
              display: "inline"
            }}
            name="arrow-right"
          />
        }
        regular
        readOnly
        isOutsideRange={day => this.isOutsideRange(day)}
        startDate={this.state.startDate} // momentPropTypes.momentObj or null,
        startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
        endDate={this.state.endDate} // momentPropTypes.momentObj or null,
        endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
        onDatesChange={({ startDate, endDate }) =>
          this.setState({ startDate, endDate })
        } // PropTypes.func.isRequired,
        onClose={({ startDate, endDate }) =>
          this.handlePeriodChange(startDate, endDate)
        }
        focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
        onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
      />
    );
  }
}

DateRange.propTypes = {
  LoadingChartAnalytics: PropTypes.func.isRequired,
  UpdateStartEndDate: PropTypes.func.isRequired,
  selectedPlatform: PropTypes.string.isRequired,
  analyticsId: PropTypes.string.isRequired,
  endDate: PropTypes.string.isRequired,
  startDate: PropTypes.string.isRequired
};

export default withStyles(styles)(DateRange);