MUI DarkTheme 在 DateRangePicker 和 datetime-local TextField 中不起作用答案

【问题标题】：MUI DarkTheme not working in DateRangePicker and datetime-local TextFieldMUI DarkTheme 在 DateRangePicker 和 datetime-local TextField 中不起作用
【发布时间】：2023-02-08 06:05:22
【问题描述】：

我在使用 DatePicker 和 MUI 暗模式时遇到了一些问题，而在其他地方一切正常。

1. 对于 type="datetime-local" 的 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 道具不适用于 Typescript Property 'sx' does not exist on type 'IntrinsicAttributes & OutlinedTextFieldProps'

我有其他 TextField，它们与以下代码配合使用效果很好

    <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>
                ),
              }}
            />

你觉得我能怎么处理这个问题，而且日历弹出窗口也是白色的，而不是预期的灰色

2.对于DateRangePicker同样的问题发生在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}
    />

我已将 <CssBaseline /> 添加到我的 App.tsx，但似乎没有任何效果。

我花了几个小时试图通过各种其他问题找到解决它的方法，但没有任何效果。

感谢您的帮助！

【问题讨论】：

您很可能需要覆盖主题提供程序中的组件 css。有一个example here

标签： material-ui react-tsx darkmode

【解决方案1】：

这是内置的浏览器组件。您需要告诉浏览器您使用深色主题。在 MUI 中，您可以通过将 enableColorScheme 传递给 CssBaseline 组件来做到这一点：

<CssBaseline enableColorScheme />

您也可以通过使用 css 属性 color-scheme: dark 来做到这一点。如果您想将此应用到整个页面，请将此属性添加到 :root。是否也可以通过将元标记添加到 html 的头部：

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

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

【讨论】：