[Feature] add style compatibility with material-ui theme

[tracker1]

I'd create a PR for this if I had the time... IT would be really nice if in addition to the .scss styling, you exported a function that can generate styling for use with material-ui (one of the most popular component libraries for React).

ex:

export const useMaterialTheme = theme => ({
 ...
  "& .rdrDateDisplayItemActive": {
   input: {
      color: theme.color.primary.main
    }
  },
  ...
})

In this way, someone using the library could import that exposed method and integrate it into their main component hierarchy to support this library.

import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { useMaterialTheme } from "react-date-range/material-ui";
import theme from "./theme";

const useStyles = makeStyles(theme => ({
  reactDateRange: useMaterialTheme(theme),
  // other classNames to use
}));

export default () => {
 const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <div className={reactDateRange}>
        ...
      </div>
    </ThemeProvider>
  );
};

Could potentially make @material-ui/core an optional dependency and add a ReactDateRangeMaterial component wrapper that is similar to the component above, but without the use of ThemeProvider (which would be used before said wrapper).

import {ReactDateRangeMaterial} from "react-date-range/material-ui";
...
    <ThemeProvider theme={theme}>
      <ReactDateRangeMaterial>
        ...
      </ReactDateRangeMaterial>
    </ThemeProvider>

[tracker1]

Note: if you add support for a context wrapper for use with localization, you should pass props through from this component to the localization and/or other global settings...

[githorse]

+100. I love the style of the Material-UI DateRangePicker (now moved from labs to Mui X) and it's consistent with the rest of my app, built in Material-UI -- but it's an expensive premium component. This component will fill the gap but I need to figure out how to style it as closely as possible to the rest of my Material-UI-based app. For now I'll have to just figure out some styles I can hardcode into the .scss file, but I'm not sure how I'll be able to use colors/styles from the theme (set at runtime) using that method.

[zielaq]

I'd create a PR for this if I had the time... IT would be really nice if in addition to the .scss styling, you exported a function that can generate styling for use with material-ui (one of the most popular component libraries for React).

ex:

export const useMaterialTheme = theme => ({
 ...
  "& .rdrDateDisplayItemActive": {
   input: {
      color: theme.color.primary.main
    }
  },
  ...
})

In this way, someone using the library could import that exposed method and integrate it into their main component hierarchy to support this library.

import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
import { useMaterialTheme } from "react-date-range/material-ui";
import theme from "./theme";

const useStyles = makeStyles(theme => ({
  reactDateRange: useMaterialTheme(theme),
  // other classNames to use
}));

export default () => {
 const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <div className={reactDateRange}>
        ...
      </div>
    </ThemeProvider>
  );
};

Could potentially make @material-ui/core an optional dependency and add a ReactDateRangeMaterial component wrapper that is similar to the component above, but without the use of ThemeProvider (which would be used before said wrapper).

import {ReactDateRangeMaterial} from "react-date-range/material-ui";
...
    <ThemeProvider theme={theme}>
      <ReactDateRangeMaterial>
        ...
      </ReactDateRangeMaterial>
    </ThemeProvider>

were you able to override this and get this working with mui themes ? mostly wanted to have dark/light mode