0

I encounter some problems with DatePicker and MUI dark mode whereas everyhting works well everywhere else.

1. For TextField with type="datetime-local" I cannot find how to have a white color for the icon TextField

     <TextField
                  autoComplete="off"
                  required
                  fullWidth
                  id="enddate"
                  variant="outlined"
                  label={'label'}
                  value={formState.enddate}
                  onChange={(e) => handleChange('enddate', e)}
                  className={classes.input}
                  type="datetime-local"
                />

sx props don't work with Typescript Property 'sx' does not exist on type 'IntrinsicAttributes & OutlinedTextFieldProps'

I have other TextField and they work well with the following code

enter image description here

    <TextField
              autoComplete="off"
              error={formState.borrower_start.length === 0}
              required
              fullWidth
              id="borrower_start"
              variant="outlined"
              label="Comentaire"
              value={formState.borrower_start}
              onChange={(e) => handleChange('borrower_start', e)}
              className={classes.input}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <PermIdentityOutlinedIcon />
                  </InputAdornment>
                ),
              }}
            />

How do you think I can handle that AND the fact that the calendar popup is also white, not the expected grey enter image description here

2. For DateRangePicker The same issue occurs with DateRangePicker component from MUI

<DateRangePicker
      PopperProps={{ container: document.body }}
      open={pickerOpen}
      disabled={props.disabled}
      startText={props.startText ?? 'Du'}
      endText={props.startText ?? 'Au'}
      disableFuture={props.disableFuture}
      inputFormat={'dd/MM/yyyy'}
      value={internalDateRange}
      onChange={handleDateRangeChange}
      onOpen={onOpen}
      onClose={onClose}
      onError={onError}
      renderInput={renderInput}
      disableCloseOnSelect={false}
    />

enter image description here

I have added <CssBaseline /> to my App.tsx but nothing seems to work.

I have spent hours trying to find how to solve it through various other questions but nothing is working.

Thank you for your help!

Gaboflo
  • 75
  • 2
  • 7
  • You most likely need to override the component's css in your theme provider. There is an [example here](https://github.com/mui-org/material-ui-pickers/issues/393#issuecomment-591747961) – Jamie_D Dec 26 '21 at 15:48

1 Answers1

2

This is built-in browser component. You need to tell browser that you use dark theme. In MUI you can do that by passing enableColorScheme to CssBaseline component:

<CssBaseline enableColorScheme />

You can also do that by use css property color-scheme: dark. If you want to apply this for whole page then add this property to :root. Is it also possible by adding meta tag to head of html:

<meta name="color-scheme" content="dark">

More about this here:

https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-handling-user-agent-styles

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

vicodin
  • 91
  • 8